Jump to content

Image Quality of Gallery Section Significantly Declines on Mobile

Go to solution Solved by JoshEdgerly,

Recommended Posts

Hello, 

Site: joshedgerly.squarespace.com
Password: Squarespace

My homepage starts with a Slideshow: Full gallery section. It's set to full bleed with a Horizontal Panels animation. The images look crisp on desktop, tablet and Squarespace's mobile preview, but once I get on my iPhone (SE 2nd Edition), the quality is terrible. I've done a lot of searching online and cannot seem to find a solution on why this is happening. Any ideas?

Screen Shot 2024-02-23 at 8.34.04 PM.png

IMG_5328.PNG

Screen Shot 2024-02-23 at 8.30.22 PM.png

Screen Shot 2024-02-23 at 8.30.28 PM.png

Edited by JoshEdgerly
Password change
Link to comment
  • JoshEdgerly changed the title to Image Quality of Gallery Section Significantly Declines on Mobile
  • Replies 1
  • Views 1.2k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

  • Solution

Hello again, 

After 4 days of no responses here, and unfortunately no help from Squarespace Support (though, that's not on the person I was working with — she was great), I was able to come up with a solution myself. I wanted to document the process here in case it was helpful to anyone in the future. 

TLDR version: Create two gallery sections, one on top of the other. [Order doesn't matter here] The first will contain horizontal-oriented photos. The second will contain vertical-oriented photos. Use CSS to target the two sections to turn one off and one on depending on the break point you want.

 

While Squarespace Support was friendly and eager to assist, this ultimately led nowhere. It was pointed out that newer/larger phones will display higher quality images, but that wasn't the solution I was looking for.

The weirdest part of all of this was the fact that I could load my website when my phone was in a horizontal orientation and view image crystal clear. Rotating back to vertical, the images were still fine. Upon reload, we were back to low quality garbage. 

This led to me wondering if instead of loading horizontal-oriented photos to the gallery, I loaded vertically-oriented photos. Vertical photos looked great on mobile and like trash on desktop. Last step was to duplicate the gallery section. Have one gallery loaded with horizontal-oriented photos and the other gallery with vertical-oriented photos. Then target the two sections and turn one off and one on depending on the screen size. Code pasted below for reference. (Your data-section-id number will be different). 

I filled Squarespace Support in on all of this. Hopefully that or this post helps someone else!

@media screen and (max-width: 649px) {
  [data-section-id="651db6f3fa172b23a599a565"] {
    display:none;
  }
}
@media screen and (min-width: 650px) {
  [data-section-id="65de5558b05ac75d76dc41d8"] {
    display:none;
  }
}

 

IMG_5341.PNG

Edited by JoshEdgerly
adding photo
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.