Checking the mobile view
How to preview and check how your Squarespace website looks on phones and tablets, and what to do if something looks wrong.
- Difficulty
- Beginner
Many of your visitors will be on a phone. Checking the mobile view of your Squarespace site before you save changes is a good habit. This guide shows you how to preview your site on different devices.
Quick summary
While editing a page, click the Mobile View icon in the top-right corner to see the phone version. It's a close approximation, not an exact match for every phone. Squarespace adjusts your site for mobile automatically, and in Fluid Engine sections you can also arrange the mobile layout separately from desktop.
Why mobile view matters
Plenty of people will find your site on a phone. If your site looks broken, cramped, or hard to read on a phone, visitors will leave. Squarespace does a lot of the mobile formatting automatically, but some things — like long text, oversized images, or custom spacing — can still look off on smaller screens.
How to preview the mobile view in the editor
Open the page editor (see How to edit a page).
Find the Mobile View icon in the top-right corner of the page.
Click the Mobile View icon to switch to mobile view. The page preview shrinks to show approximately how it looks on a phone.
Scroll through the entire page to check that text is readable, images look good, and no content is cut off.
Tablets: there's no separate tablet preview on a computer. Tablets generally show the mobile version of your site, though some show the desktop layout, depending on their size and settings.
Click the Desktop View icon in the same top-right corner to return to the desktop view.
What changes where
In Fluid Engine sections, moving, resizing, or hiding blocks in mobile view changes only the mobile layout. Some blocks also have mobile-only design options. But editing a block's content, like its text or a button's link, changes it on desktop too. So does changing a design setting on a block that has no mobile-only options. In older classic editor sections, anything you change in mobile view also changes the desktop view.
What Squarespace adjusts automatically
Squarespace handles many mobile adjustments for you:
- Content generally stacks into a single column on small screens
- Text size is adjusted to fit the screen
- Navigation collapses behind a menu icon (often a hamburger icon ☰)
- Images resize to fit the screen. Banner and section background images always get cropped a little on phones.
What can still go wrong
Things to check on mobile
Even with automatic adjustments, watch out for these common issues on mobile:
| Issue | What to look for |
|---|---|
| Text too small | Body text should be easy to read without zooming in |
| Images cut off awkwardly | Important parts of images (faces, text) cropped out |
| Buttons too small to tap | Buttons should be finger-sized |
| Content overflowing | Text or images extending beyond the screen edge |
| Navigation not working | Can you open and use the mobile menu? |
Checking on a real phone
The editor preview is approximate — it may not match every phone perfectly. For important changes, also view the live site on your actual phone:
Save your changes in the editor.
On your phone, open a browser and go to your website's address.
Navigate through the pages you changed and check how they look.
Try it in incognito / private mode
If you're seeing a cached version of your site, open your phone browser in private (incognito) mode to force a fresh load of the latest version.
Common questions
My layout looks great on desktop but terrible on mobile. What can I do?
In Fluid Engine sections, switch to mobile view and rearrange, resize, or hide blocks. This doesn't touch your desktop layout. In classic editor sections, the mobile layout follows the desktop one, so fixing it means changing the desktop arrangement. If the issue is significant, contact Chykalophia — this is a design task.
Can I hide a block on mobile only?
Yes, in Fluid Engine sections. Switch to mobile view, click the Layers icon in the top-left corner of the section, then click the eye icon next to the block you want to hide. You can also right-click the block and choose to hide it on mobile. The same method hides a block on desktop only. Classic editor sections don't have separate mobile and desktop layouts, so this option isn't available there.
The mobile menu isn't opening. Is this a Squarespace bug?
It could be a site issue. Try clearing your phone's browser cache. If the problem persists across different phones and browsers, contact Chykalophia so we can investigate.
Related guides
Need a hand?
Learn more
Last updated