Spacing Issues on Mobile Devices: Squarespace Fluid Engine

Site URL: https://ayamun.squarespace.com

Passcode: 9166

Hi there,

I’m having trouble getting the mobile version of my client’s website to look the way I’d like. I’m working on two monitors – a 32" 4k monitor scaled down to a resolution of 2560 by 1440, and my 2018 15" MacBook Pro with its default resolution of 1680 by 1050. I work primarily on the 32" monitor, but I use my 15" macbook pro for reference, as well as a few different sized mobile devices (large and small), and a 12.9 iPad Pro.

When working on my 32" monitor, everything looks great – the desktop and mobile websites looks preem. On my 15" MacBook Pro, the desktop version of the site looks great, but on the mobile version, there appears to be a lot of additional space that is injected between page sections. I previewed my website on all my mobile devices previously mentioned, and they all appear to have the same issue. After a quick google search, this appears to be a pretty consistent bug with Squarespace’s Fluid Engine, specifically on tablets. I could do with not having a great looking tablet version of my client’s website until Squarespace comes up with a fix, but it NEEDS to look good and read well on mobile.

How do I go about fixing this issue? My primarily goal is took make my client’s website look good and read well on 13"-15" laptop devices and on average sized smartphones – bonus points if they look good on bigger phones as well.

I have attached a couple of screen captures below showcasing the problem. Please read the file names, as they tell you what is considered correct or incorrect spacing on desktop and mobile, as well as the device’s resolution.

Thanks again!

No answer to your question, but here to commiserate. The gaps are really awkward, I'm going to contact support and see if the have any fixes.