Jump to content

Spacing Issues on Mobile Devices: Squarespace Fluid Engine

Recommended Posts

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!

Link to comment
  • Replies 3
  • Views 602
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

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