Squarespace Site Looking Wrong on a Phone? Start With the Mobile Layout
You finish a nice update to the homepage, save it, admire it on your laptop and go and put the kettle on. Meanwhile, on every phone that visits, your main button is sitting underneath a large photo of the office plant.
Squarespace is doing what it was built to do. Fluid Engine, the editor in Squarespace 7.1, treats the phone layout as a layout in its own right. Once you understand how it behaves, a Squarespace mobile layout gets much easier to keep tidy.
Phones are roughly half your audience and all of Google's index. Statcounter's UK figures for August 2026 put desktop at 49.17% of page views, mobile at 46.11% and tablets at 4.72%, and Google has used the mobile version of a site for indexing and ranking since it completed the move to mobile-first indexing in 2023. So the phone version is not a smaller copy of the desktop one, in Google's eyes or your customers'. In Squarespace 7.1, every Fluid Engine section keeps its own mobile arrangement, edited in Mobile View. Content changes carry across both layouts. Moving, resizing and hiding blocks does not. Blocks added later are placed on mobile automatically, as close to the desktop layout as Squarespace can manage, and that is where most of the odd results come from.
Desktop and mobile are two separate layouts
In Fluid Engine sections, Squarespace keeps a separate mobile layout. As Squarespace's help article on mobile layouts puts it, you can arrange the mobile layout of Fluid Engine sections "without affecting the desktop layout".
That's great for control. It also means the two can drift apart.
What stays in step, and what doesn't:
Content changes sync. Editing text, adding a link to a button or changing design settings on blocks that don't have mobile-specific options affects both layouts.
Arrangement doesn't. Moving, resizing and hiding blocks in mobile view only changes mobile.
New blocks get a best guess. Blocks added after you've edited the mobile layout appear on mobile "as similarly to the desktop layout as possible". Sometimes that's fine. Sometimes it's the office plant.
How to check your mobile layout
The most reliable place to start is the editor:
Open the page and click Edit.
Click the Mobile View icon in the top right corner.
Work through every section from top to bottom.
Then pick up a real phone, because the editor and a phone tell you different things. The editor shows you the arrangement, block by block, and lets you fix it. A phone shows you what using the page actually feels like: whether the buttons are big enough to tap without aiming, how long the page feels when you're scrolling with a thumb, whether the text sits too close to the edge of the screen, and whether that hero image crops off the top of someone's head. Check it on your own phone and, if you can, on somebody else's, since screen sizes vary more than most people assume.
What you can change in mobile view
In mobile view you can:
reorder blocks, by selecting a block and using the up and down arrows
resize blocks, so text and buttons aren't cramped
hide blocks from the mobile layout using the Layers panel
change the grid height of a section to close awkward gaps
adjust some design options, such as the background of a text block or the shape of a shape block
Hiding is useful for decorative elements that add scrolling without adding meaning. Be careful with anything a phone visitor needs, though. You can't hide your way out of a layout problem.
Common mobile problems and what usually fixes them
A button a long way from the text it belongs to
Reorder the blocks so the button sits directly after the sentence that explains it.
Text squeezed into a narrow column
Widen the text block across the full mobile grid. Column widths that look elegant on desktop rarely suit a phone.
Gaps that make the page look broken
Reduce the section's grid height, or move blocks closer together. A big empty gap on a phone can look as if the page has stopped loading.
Images cropping in odd places
Check the image's focal point, and ask whether a different image would suit a tall, narrow screen better. A wide team photo rarely survives being shrunk to phone width. While you're looking, check the text sitting over images too: low contrast is the most common accessibility failure on the web, found on 83.9% of home pages in WebAIM's 2026 survey of a million sites, and pale text over a photo is far harder to read on a phone in daylight than it is on the monitor where it was designed.
Pages that go on forever
Hide purely decorative blocks on mobile, and look hard at content that isn't earning its place. A section that reads as a pleasant pause on a wide screen becomes another four seconds of scrolling on a phone, and phone visitors are usually looking for one specific thing: your prices, your opening hours, a way to contact you. If somebody has to scroll past five images to reach a phone number, the images are costing you more than they're adding. Cutting a phone page down is rarely about removing content people want. It's about moving it below the content they came for.
Habits that stop mobile layouts drifting
Check mobile view every time you add a block, rather than waiting for someone to complain.
Arrange new content on mobile straight after adding it on desktop, while you still remember what it's for.
Look at the pages that matter most on a phone once a month.
If several people edit the site, make a mobile check part of how everyone publishes. Squarespace's permission roles help keep structural changes with the people who know to check.
Speed counts double on a phone
Layout is half the job. The other half is weight. Google's Core Web Vitals thresholds ask for a Largest Contentful Paint under 2.5 seconds, an Interaction to Next Paint under 200 milliseconds and a Cumulative Layout Shift under 0.1, measured at the 75th percentile of visits and reported separately for mobile and desktop. Two of those are things you can affect without touching code. Big uncompressed images are the usual reason a Squarespace page is slow to paint, and Squarespace recommends images around 2,500 pixels wide at 500 KB or less. A layout that jumps around while images load is a Cumulative Layout Shift problem as well as an irritation, and it shows up far more on a phone than on the desktop where the page was designed.
When custom code is the answer
Fluid Engine gives you two layouts, desktop and mobile. If you need something beyond that, such as a different arrangement for tablets or a section that behaves differently on small screens, you're into custom CSS. Do it carefully, because code that fights the editor tends to break the next time someone edits the page.
Getting help
If your mobile layout needs more than a tidy-up, Designer for a Day is a good way to fix it and learn how to keep it fixed. For the full picture first, start with an audit and review. Mobile layouts also feature in our write-up of what our Squarespace audits keep turning up.
FAQs
Why does my Squarespace site look different on mobile?
Squarespace 7.1's Fluid Engine editor keeps a separate mobile layout for each section, so the phone version is a different arrangement rather than a squeezed copy. Moving, resizing or hiding blocks on desktop doesn't change the mobile layout, while content changes such as editing text or adding a link apply to both. New blocks are placed on mobile automatically, as close to the desktop layout as Squarespace can manage, which is why a site drifts out of step over time. To fix it, open the page, click Edit, click the Mobile View icon in the top right corner, and work through each section, reordering and resizing blocks or hiding the ones a phone visitor doesn't need.
How do I edit the mobile layout on Squarespace?
Open the page, click Edit, then click the Mobile View icon in the top right corner. You can reorder and resize blocks, hide blocks using the Layers panel and change the section's grid height without affecting the desktop layout.
Do text changes on desktop also change the mobile version?
Yes. Content changes, such as editing text or adding a link to a button, apply to both layouts. Arrangement changes, such as moving or resizing blocks, only apply to the layout you're editing.
Can I hide a block on mobile only in Squarespace?
Yes. In Mobile View, use the Layers panel to hide the block from the mobile layout. Because mobile arrangement changes don't affect desktop, the block still shows on desktop.
