Jump to content

Mobile banner becomes pixelated

Recommended Posts

Site URL: https://www.janglad.works/modol

Like many others I had issues with the mobile banner cropping too much, I solved this with this code:


@media screen and (max-width:640px) {  
    min-height: 0 !important;
    height: 120vw;
    min-height: 0 !important;
    height: 60vw;

however this results in the images becoming very pixelated, from what I understand Squarespace creates multiple version of images when you upload them and I assume the correct one isn't selected here? I also tried code to overwrite the banner so I could create a custom one for mobile from scratch but I only managed to apply a background to sections that didn't have one to begin with.


I attached an screenshot showing the problem, it's especially noticeable on the bottom image.

https://www.janglad.works/modol pw verysecurepassword




Link to comment
  • Replies 3
  • Views 572
  • Created
  • Last Reply
On 12/6/2020 at 1:11 AM, tuanphan said:

Hi. Have you solved this yet?

This actually seems to be caused by the WebGL effects and not the CSS code I used as disabling them fixes it. Is this a bug on Squarespace's end? Maybe forcing a different banner for mobile can still fix it? Or as a last ditch: is there any way to disable the WebGL Image effects on mobile only?


Thanks a ton in advance!

Link to comment


This topic is now archived and is closed to further replies.

  • 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.