Jump to content

Header images - displays in bad quality on mobile

Recommended Posts

Site URL: https://spinach-keyboard-w7ws.squarespace.com/

Hello!

All the header images on the site I'm building are displaying in bad quality on mobile.

It wasn't like this before. I think it happened around a week ago.

Could it be something with the new Squarespace update (when all text links also got underlined)?

I have optimised the images for web (around 500kb in size and between 1500-2000px in width)

The images are sharp on desktop (but it I shrink the browser window to "mobile size", the header image displays in bad quality)

See attached screenshots.

image.thumb.png.9f7a31d32d2d3786da69b465bea55b1e.png

image.thumb.png.ec27461cc927eb3ac1a8d4d135a7cb09.png

Link to comment
  • Replies 14
  • Created
  • Last Reply

Top Posters In This Topic

  • 2 weeks later...
  • 2 weeks later...

Yesterday, I found a workaround to fix the bug.

By making two identical header sections, and using this code the advanced section in the setting of each page (found in this guide)
 
<style>
@media only screen and (max-width: 780px) {
    #page section:nth-of-type(1) { 
            display: none; 
    } 
  }
@media only screen and (min-width: 781px) {  
    #page section:nth-of-type(2) { 
        display: none !important;
    }
  }
</style>
 
This makes the first banner section appear on desktop, and the second banner section appear on mobile.
For some reason, this fixes the bug, and the mobile banner page appears in good quality.
Edited by Erlend-fs
Link to comment

Here is what Squarespace says about the issue:

 

Shayler W. (Squarespace) 

Apr 20, 2021, 4:05 PM EDT 

Hey Erlend,

Thanks for following up on this.

We appreciate your patience while we track this issue. I've checked with the team and I'm afraid we don't have any updates on this quite yet.

That said, we have noted your feedback, and it hasn’t been ignored. The time it takes to find a solution is due in part to the complexity and challenges of releasing that type of fix, and the volume of design solutions available that don't experience this behavior. We’ll use your case to help prioritize upcoming bug fixes and product updates within the Squarespace platform.

I apologize that you're still experiencing this issue. In the interim, please let us know if you have any further questions - we're here for you 24/7.

All the best,
Link to comment
  • 5 months later...

There is no problem anymore here.

 

But I found a workaround to fix the bug.

By making two identical header sections, and using this code the advanced section in the setting of each page (found in this guide)
 
<style>
@media only screen and (max-width: 780px) {
    #page section:nth-of-type(1) { 
            display: none; 
    } 
  }
@media only screen and (min-width: 781px) {  
    #page section:nth-of-type(2) { 
        display: none !important;
    }
  }
</style>
 
This makes the first banner section appear on desktop, and the second banner section appear on mobile.
For some reason, this fixes the bug, and the mobile banner page appears in good quality.
Link to comment
  • 11 months later...
  • 1 year later...
  • 4 months later...

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.