Squarespace mobile layout messed up or overlapping
A jumbled Squarespace mobile layout usually comes from Fluid Engine’s separate mobile grid: blocks placed tight together or on top of each other collide when text renders slightly larger on some phones. Open the page in the editor’s mobile view, separate overlapping blocks and give text boxes room to grow. If the layout also breaks in narrow desktop windows, line your custom CSS up with 767px, the fixed width where Squarespace 7.1 switches to its mobile layout.
What you'll see
On a phone, headings run into images, text spills out of its box, and buttons sit on top of paragraphs. The same page can look correct on an iPhone and messy on an Android phone, or fine on phones but broken in a desktop browser window narrowed to around 767px. The desktop layout itself is usually unaffected.
Why it happens
1. Fluid Engine mobile blocks overlap
Fluid Engine keeps a separate layout for mobile. If blocks are placed edge to edge or layered, any change in text height pushes one into the next, so a layout that fits on one phone overlaps on another.
2. Fonts render at different sizes on different devices
Android and iOS use different font rendering and sometimes different fallback fonts. A text block sized exactly for one device can overflow on another by a line or two, which is enough to collide with the block below.
3. Custom CSS targets the wrong breakpoint
Squarespace 7.1 switches to the mobile layout at 767px and that width cannot be changed. Media queries written for other widths leave a range of screen sizes styled by neither the desktop nor the mobile rules you intended.
How to fix it
- Edit the page and switch the editor to mobile view. Look for blocks that touch or overlap, and drag them apart so each has its own rows on the grid.
- Give text blocks extra rows of empty space below their content, so a line or two of growth on another device does not run into the next block.
- Avoid layering text over images in the mobile grid unless the text box is large enough for longer wrapping; otherwise place the text below the image.
- Review Custom CSS and change media queries to use 767px (max-width: 767px for mobile, min-width: 768px for desktop) so they match where Squarespace switches layout.
- Check the page in a desktop browser narrowed to just under and just over 767px to make sure neither layout breaks at the switch.
- Test on a real iPhone and a real Android phone, because the overlap often shows on only one of them.
How to check it's fixed
- At 360px, 390px, 414px and 767px wide, scroll each edited page and confirm no text overlaps another block and nothing is cut off.
- Swipe sideways on each page to confirm there is no horizontal scrolling at phone widths.
- Open the page on both an Android phone and an iPhone and compare them.
What a QAlaunch scan shows for this
- Overlapping, cut-off or hidden elements in the phone-width screenshot, picked up by visual review.
- Horizontal overflow, text too small to read and tap targets too close together at 390px.
- Layout shift measured while the page loads.
- Screenshots come from a Chromium browser at fixed sizes, so a problem that appears only with one Android phone’s fonts may need checking on that device.
See exactly what a full report contains in the sample report.
Frequently asked questions
Why does my site look different on Android and iPhone?
The two systems render fonts differently, so the same text takes slightly different space. In a tight Fluid Engine mobile layout that small difference is enough to make blocks overlap on one and not the other.
Do mobile edits change my desktop layout?
In Fluid Engine, moving blocks in mobile view only changes the mobile arrangement. Editing the content of a block, such as its text, changes it on both.
Why does my desktop browser show the mobile layout?
Squarespace 7.1 shows the mobile layout whenever the window is 767px wide or less, whatever the device. A narrow desktop window or split screen will trigger it.
Rather have a QA engineer test it by hand?
If this is a site you're launching or handing to a client, I'll go through it by hand, including the Squarespace-specific issues a scan can't reach, like logged-in flows.
- Up to 10 key pages tested by hand, not a scan
- Every flow a customer uses: forms, sign-up, checkout, booking
- Real mobile and desktop browsers
- A written report in plain language, with screenshots
- A 15-minute call to walk you through it
- 10 years of professional QA experience
Tell me about your site and I'll reply personally, usually the same day.
No payment now. I'll confirm scope and price first.
Related fixes
More for Squarespace: all Squarespace fixes
Written by Waqas Ahmad, QA engineer with 10 years of professional testing experience. Last checked October 26, 2026.
Sources: Squarespace Forum: mobile view different on Apple and Android · Squarespace Forum: mobile site shows on narrow desktop at 767px