Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Mobile banner becomes pixelated



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 post
  • Answers 3
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

3 answers to this question

Recommended Posts

  • 0
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 post

Create an account or sign in to comment

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

  • Create New...