Squarespace Mobile View: How to Edit and Preview on Mobile (2026 Guide)

Squarespace sells itself as responsive by default. That promise is mostly true, until you actually load your live site on a phone and notice that your hero headline wraps onto four lines, your call-to-action button sits below the fold, and your mobile menu looks nothing like what you sketched. Every Squarespace user hits this wall eventually, and the fix is rarely obvious because Squarespace hides its mobile controls in different spots depending on which version you use.

This guide walks through every place Squarespace lets you adjust the mobile view squarespace experience, in both 7.1 (Classic Editor and Fluid Engine) and the legacy 7.0. You will learn where to find mobile preview, how to edit fonts and hide elements per device, how to customize the mobile menu, how to fix common iOS bugs, and how to verify your work outside the Squarespace editor with a real cross-device tool. By the end you will have a 10-point checklist you can run before every publish, plus the CSS snippets and workflow tips that the official Help Center skips over.

How Squarespace handles mobile responsive design

Squarespace has three rendering systems live in 2026, and the one you are using changes everything about how you edit for mobile. Version 7.0 is the legacy product. It is still supported but no longer actively developed for new templates. Mobile in 7.0 is fully automatic, meaning the platform decides how blocks stack and you mostly get to react with CSS overrides. Version 7.1 is the current default, and inside 7.1 you will run into two distinct editing models: the older Classic Editor (used by index pages and some older sites) and the newer Fluid Engine, which is the grid-based editor that ships with every new 7.1 section created after July 2022. The official Squarespace Fluid Engine overview documents the grid behavior in more detail.

The big distinction worth memorizing: only Fluid Engine gives you a true per-device layout. In Classic Editor and 7.0, any block you add appears on every breakpoint, and the platform's responsive rules decide the order and spacing. Fluid Engine, by contrast, has separate desktop and mobile canvases. You can move, resize, hide, or restyle a block on mobile without touching the desktop layout, and vice versa. That is the closest Squarespace gets to a real mobile editor, and it is why we recommend rebuilding any heavy hero or pricing section in Fluid Engine before you spend hours fighting Classic Editor with custom CSS.

Where to find mobile preview in Squarespace 7.1

The mobile preview button in 7.1 lives at the top-right of every editor screen, next to the Save button. It is a tiny phone icon that toggles a phone-sized iframe inside the editor. Click it and the canvas shrinks to roughly 375 pixels wide, which approximates an iPhone SE. Click again to return to desktop. This toggle is available on every section type, including blog posts, product pages, and the standard layout pages.

What happens next depends on the editor type. Here is the workflow you should commit to muscle memory:

1. Open the page you want to edit and click Edit.
2. Click the phone icon at the top-right to enter mobile preview.
3. If the section is built in Fluid Engine, click the Mobile tab inside the section toolbar to enable per-device editing. You can now drag blocks, resize the grid, and reorder content without touching desktop.
4. If the section is built in Classic Editor, mobile mode is preview-only. To change anything mobile-specific you will need Site Styles overrides or Custom CSS with a media query.
5. Save your changes. Then open the live URL in a separate tab to confirm.

A quick warning: the in-editor preview is a fixed iframe and does not run a real mobile browser. We have seen sticky headers, custom fonts, and lazy-loaded images render correctly inside the preview but break on real iOS Safari. Always sanity-check the live URL.

Where to find mobile preview in Squarespace 7.0

If your site was built before mid-2020 and you have not migrated, you are almost certainly on 7.0. The mobile preview lives in the top toolbar above the page canvas, near the Save and Cancel buttons. It is a single phone-shaped icon. Click it and the editor switches to a mobile preview frame, but here is the catch: any edit you make affects every breakpoint at once. There is no per-device layout in 7.0.

That has real consequences for how you design. If you increase the headline size on the desktop view, the headline also gets bigger on mobile. The only way to scope changes to a single breakpoint is to inject Custom CSS with a media query, which we cover later in this post. Some 7.0 templates (Brine family especially) expose mobile-only options in Style Editor, like mobile logo size and mobile menu icon style. Look for tweaks that include the word "mobile" in their label.

If you are starting a brand new project in 2026, do not pick 7.0. Pick 7.1 with Fluid Engine. The mobile editing story alone is worth the switch. If you are stuck on 7.0 because of an unmigrated commerce store or a custom template, plan a 7.1 rebuild within 12 months. Squarespace has signaled that new mobile features will land in Fluid Engine only.

Editing the mobile layout in Fluid Engine

Fluid Engine is where the squarespace mobile editor story finally gets good. Each Fluid Engine section is built on a grid, and that grid has two independent layouts: one for desktop and one for mobile. To edit the mobile grid, open the section, click the phone icon at the top-right of the editor, and then click the Mobile tab in the section toolbar. The canvas now reflects mobile only, and any drag, resize, or reorder applies to mobile alone.

A few practical patterns that work well:

• Vertical reorder: drag a block above or below another block to change reading order on mobile. The desktop order stays intact.
• Resize for thumb reach: stretch primary buttons to nearly full grid width so users can tap them without aiming.
• Mobile padding: use the spacer block or the section's padding controls to add breathing room around hero text. Mobile typically needs more vertical padding than desktop.
• Per-device hide: click any block in mobile view and use the eye icon to hide it on mobile only. Use the same icon in desktop view to hide a block on desktop only.

Remember that changes you make in mobile view do not sync back to desktop. If you fix the mobile layout and then realize you also want the change on desktop, you have to switch tabs and edit twice. That extra step is the price of true per-device control. For a refresher on responsive editing in other platforms, you can compare this with the WordPress mobile preview workflow, which works very differently inside Elementor and Gutenberg.

Editing fonts and headings for mobile

Mobile typography is the single biggest reason Squarespace sites look amateur in the wild. The default H1 size on most 7.1 templates is between 60 and 90 pixels, which is gorgeous on a 1440-pixel desktop and overwhelming on a 360-pixel phone. The fix is in Site Styles, not in the page editor.

To rescale fonts for mobile in 7.1, open Site Styles (the paintbrush icon in the editor sidebar), click Fonts, and scroll to the Base Size or Responsive Scaling slider depending on your template. Most templates expose a single global scale that shrinks every heading and body size proportionally on mobile. A scale of 70 to 80 percent of desktop usually looks right. Test by toggling the phone preview and watching how the H1 wraps.

If you want true per-device font sizes (different H1 sizes for desktop and mobile, not just a uniform scale), you will need Custom CSS. Here is a starting point: target the H1 inside a media query for screens under 768 pixels and override the size in clamp() so it scales smoothly. We recommend H1 sizes between 28 and 36 pixels at the 320 to 375 pixel viewport range. Body text should sit at 16 pixels minimum to avoid iOS Safari's auto-zoom on form inputs. Anything smaller than 16 pixels on a form field will trigger zoom and make your form look broken.

Hiding and showing elements on mobile only

The most common mobile fix in Squarespace is hiding a desktop-only element on phone screens. Think of a large hero image that crops awkwardly on mobile, or a decorative graphic that just takes up scroll space. Fluid Engine makes this trivial: click the block in mobile view, click the eye icon in the block toolbar, and the block is hidden on mobile only. Use the same icon in desktop view to hide it on desktop only.

Classic Editor and 7.0 do not have this control. You have to use Custom CSS. Open Design, Custom CSS, and paste a media query that hides the element on mobile. The trick is finding the right selector. Use Chrome DevTools to right-click the element on your live site and copy its CSS selector or block ID. Squarespace block IDs look like #block-yui_3_17_2_1_1234567890123_45678.

Here is the copy-paste snippet you want:

/* Hide a block on mobile only */
@media (max-width: 767px) {
  #block-yui_3_17_2_1_1234567890123_45678 {
    display: none !important;
  }
}

/* Hide a block on desktop only */
@media (min-width: 768px) {
  #block-yui_3_17_2_1_1234567890123_45678 {
    display: none !important;
  }
}

Replace the block ID with your own. The !important flag overrides Squarespace's built-in styles, which is sometimes necessary because the platform's CSS is loaded after Custom CSS in the cascade.

Customizing the Squarespace mobile menu

The mobile menu is the navigation overlay that opens when a phone user taps the hamburger icon. Squarespace 7.1 gives you two main styles: a drawer that slides in from the side, and a full-screen overlay that covers the whole viewport. Both are configured under Site Styles in the Header section. Look for options labeled Mobile Menu Style, Overlay Background, and Mobile Menu Font.

The defaults are fine for simple sites but underwhelming for brands. A few tweaks make a noticeable difference:

• Increase font size: default mobile nav font is usually 16 to 18 pixels. Bumping to 24 pixels makes the menu feel more app-like and easier to tap.
• Pick a clear hamburger icon: Squarespace offers four icon styles. The thicker three-line icon performs best in user testing.
• Match overlay background to brand: a solid brand color overlay reads more polished than the default semi-transparent black.
• Add a primary button: in 7.1 you can pin a Button Block inside the header that shows on mobile as the top item in the drawer. Use this for your highest-intent action (Book Now, Buy, Contact).

For deeper customization, use Custom CSS to restyle the menu items, animate the drawer, or change the hamburger icon to a custom SVG. The Squarespace forum has hundreds of recipe threads, and the official Squarespace Help Center covers the basic options in detail.

Mobile-specific image handling

Squarespace serves images with srcset automatically. That means when a phone loads your page, it pulls a smaller image variant rather than the full 2000-pixel desktop asset. This is great for speed but limits how much control you have over which crop a mobile visitor sees. If your hero image has a person on the left edge, that person might get cropped out on portrait phones.

The trick is the Image Block's focal point. Click any image, then click the small target icon to set a focal point. The platform centers crops around that focal point on every breakpoint, so the important part of the photo stays visible. For full control over which image shows where, you can use two Image Blocks (one for desktop, one for mobile) and hide each with the eye toggle. Mobile users only download the mobile image because of how Squarespace lazy-loads hidden assets.

For background images on sections, you can swap per device with a CSS background-image override in a media query. Set the section background to a 1x1 pixel transparent placeholder in the editor, then use Custom CSS to load a real image per breakpoint. This advanced trick is overkill for most users but powerful for hero sections where you want a square crop on mobile and a wide crop on desktop. You can do the same thing in 5 seconds with MobileViewer.io to verify that your images load correctly on real iPhone and Pixel viewports before you publish.

Squarespace mobile speed and Core Web Vitals

Squarespace sites are not famous for speed. A standard 7.1 template loads around 1.5 to 2.5 megabytes on mobile, mostly from fonts, hero images, and the platform's own JavaScript bundle. Google measures three Core Web Vitals on mobile: Largest Contentful Paint (under 2.5 seconds), Interaction to Next Paint (under 200 milliseconds), and Cumulative Layout Shift (under 0.1). Failing any of these hurts your mobile search rankings.

The biggest wins you can get on Squarespace mobile:

• Compress hero images: export at 1600 pixels wide, 80 percent JPEG quality, then run through TinyPNG before upload. A 500 KB hero is acceptable. A 2 MB hero is not.
• Limit custom fonts: each Adobe or Google Font you load adds 50 to 150 KB. Stick to two font families maximum.
• Audit Code Injection: third-party scripts (chat widgets, popups, analytics extras) are the most common culprit for slow Squarespace mobile. Remove anything you do not actively need.
• Lazy load below-the-fold sections: Squarespace lazy loads images by default but not background videos. Replace background videos with static images on mobile.
• Disable parallax on mobile: parallax scroll effects stutter on iOS and tank your INP score.

For a deeper dive into mobile speed, read our mobile performance optimization guide. The same Core Web Vitals principles apply across platforms, so even WordPress and Wix users will find the tactics transferable.

Testing your Squarespace site outside the editor with MobileViewer.io

The Squarespace mobile preview is an iframe. It is not a real mobile browser. It does not render WebKit, it cannot reproduce iOS-specific layout bugs, and it does not run third-party scripts at full fidelity. We have seen cases where the in-editor preview looked perfect and the live site on a real iPhone had a header that covered the first 200 pixels of content. Always verify on a real device or a high-fidelity emulator.

The fastest way to do that without owning every iPhone model is an external tool. To check your Squarespace site in MobileViewer.io:

1. Publish your changes (or use the unique preview URL Squarespace generates for unsaved drafts).
2. Open MobileViewer.io in a new tab.
3. Paste your URL into the input field.
4. Pick a device frame: iPhone 15 Pro, Pixel 8, iPad Air, Galaxy S24, and 45+ others.
5. Use the side-by-side compare view to see two devices at once.

This catches the bugs the Squarespace preview hides. It also lets you screenshot a real device frame for client presentations, which beats showing a tiny iframe inside the editor. For a broader overview of options, our complete guide to viewing your site on mobile compares MobileViewer with DevTools, real devices, and native simulators.

Squarespace versions compared: mobile features at a glance

Before you spend an hour fighting a layout, confirm which version and editor you are actually on. The mobile feature parity is very different across the three combinations. Use this table as a quick reference.

Feature	Squarespace 7.0	7.1 Classic Editor	7.1 Fluid Engine
Per-device layout editing	No	No	Yes
Hide block on mobile (no code)	No	No	Yes (eye icon)
Mobile preview iframe	Yes	Yes	Yes
Per-device font scaling	Template-dependent	Global only	Global plus overrides
Mobile menu styles	Drawer only	Drawer, full-screen	Drawer, full-screen, custom
Drag-to-reorder on mobile	No	No	Yes
Custom CSS support	Yes	Yes	Yes
Recommended for new sites	No	Only for legacy index pages	Yes

Common Squarespace mobile bugs and fixes

After auditing dozens of Squarespace sites, we keep seeing the same five mobile bugs. Each has a fix you can apply in under 10 minutes.

Stretched cover images. Cover image blocks default to full-bleed and can crop awkwardly on tall phone screens. Fix: set a focal point on the image, or switch to a fixed-height section with overflow:hidden.

Headers covering content. Announcement bars plus sticky headers can eat the top 120 pixels of a phone screen. Fix: reduce header padding to 16 pixels on mobile in Site Styles, and disable the announcement bar on mobile if it duplicates the page's purpose.

Gallery breakpoint issues. The Gallery Section sometimes shows three columns on a 400-pixel viewport because the breakpoint logic is template-specific. Fix: switch the gallery to Slideshow or Carousel layout on mobile, or override the column count with Custom CSS at the 767-pixel breakpoint.

Parallax stuttering on iOS. Parallax background effects use position:fixed, which iOS handles poorly inside scrolling containers. Fix: disable parallax site-wide on mobile (Site Styles) or use the prefers-reduced-motion media query.

Contact form spacing. Form fields default to small padding and can feel cramped on phones. Fix: increase input padding to 12 pixels vertical via Custom CSS, and ensure font-size is at least 16 pixels to prevent iOS auto-zoom on focus.

Squarespace mobile design checklist

Run this 10-point check before you hit Publish on any new page. It takes about five minutes per page and catches roughly 80 percent of the bugs that get caught in user testing.

1. Tap targets are at least 44 by 44 pixels. Buttons, nav links, and icons need to be thumb-friendly. Anything smaller feels broken.
2. Body font is 16 pixels or larger. Smaller text triggers iOS auto-zoom on form fields and hurts readability.
3. Hero headline does not wrap into more than three lines. If it does, shorten the copy or reduce the font size at the mobile breakpoint.
4. The mobile menu opens, closes, and scrolls. Tap the hamburger, scroll long menus, tap a link, confirm the menu closes after navigation.
5. Sticky header height is under 80 pixels. Taller headers cover too much content on small phones.
6. No horizontal scroll. Pinch out and confirm content does not extend past the viewport edge. The usual culprit is a fixed-width image or table.
7. Forms have correct input types. Email fields use type=email, phone fields use type=tel, so phones show the right keyboard.
8. Hero image is under 500 KB. Anything heavier hurts your LCP score.
9. Above-the-fold content loads in under 2 seconds on 4G. Test with the Network throttling in DevTools or with MobileViewer.io's network simulation.
10. Footer links are reachable. Scroll all the way down on the phone and confirm legal links, social icons, and contact info are visible and tappable.

Print this list, or save it as a Notion checklist. Run it on every new page and every major redesign. You will catch issues your clients (and your visitors) would have caught for you, in less time.

Conclusion

Squarespace is good at mobile by default and never great without intentional work. The platform gives you the tools (Fluid Engine, Site Styles, Custom CSS, mobile preview) but it does not push you to use them. You have to know where they are and bring a checklist to every page. Now you do.

The workflow we recommend: build your sections in Fluid Engine, scale fonts in Site Styles, hide non-essential blocks on mobile, rebuild the mobile menu to feel app-like, compress every hero image, and verify the live site on real device frames before you publish. The Squarespace editor preview lies sometimes. Use a real-device check as your final gate. You can sign up for unlimited tests on the MobileViewer.io pricing page or just open the homepage for a quick free check on your next publish.

Frequently asked questions

How do I see mobile view in Squarespace?

In Squarespace 7.1, open any page in the editor and click the phone icon at the top-right of the screen. The canvas shrinks to a mobile-sized preview. If your section is built in Fluid Engine, click the Mobile tab in the section toolbar to enable per-device editing. In Squarespace 7.0, the same icon lives in the top toolbar but only acts as a preview, not a true editor. For the most accurate view, always check your live site URL in a real device tool like MobileViewer.io after saving.

Can I edit Squarespace mobile separately from desktop?

Only if the section is built in Fluid Engine (7.1). Fluid Engine has independent desktop and mobile grids, so you can resize, reorder, and hide blocks on mobile without touching desktop. Classic Editor (used in 7.1 index pages and some legacy templates) and all of Squarespace 7.0 share a single layout across breakpoints. For those, the only way to scope changes to mobile is Custom CSS with a media query. Rebuilding the section in Fluid Engine is the cleaner long-term fix.

Why does my Squarespace site look bad on mobile?

The usual suspects are oversized hero headlines, heavy images, sticky headers eating screen space, and font sizes that auto-zoom on iOS forms. Squarespace templates default to desktop-first proportions, so a 90-pixel H1 looks gorgeous on a laptop and crushes a 360-pixel phone. Fix it by scaling fonts in Site Styles, compressing every image under 500 KB, reducing header padding on mobile, and hiding non-essential blocks. Run the 10-point checklist in this guide before publishing.

How do I hide a section on mobile in Squarespace?

In Fluid Engine, click the section or block in mobile view, then click the eye icon in the toolbar. The block hides on mobile only while staying visible on desktop. In Classic Editor or 7.0, you need Custom CSS. Add a media query targeting screens under 768 pixels and set display:none on the block's ID. Use Chrome DevTools to find the ID by right-clicking the element. Don't forget the !important flag, since Squarespace's built-in styles often load after your Custom CSS.

Does Squarespace 7.1 have a mobile editor?

Sort of. Squarespace 7.1 has a mobile preview on every page and full per-device editing inside Fluid Engine sections. Fluid Engine, introduced in 2022, is the first time Squarespace let you build a mobile layout that diverges from desktop without writing code. Older 7.1 sections built in Classic Editor (often index pages, legacy templates) do not have this capability. New sections you add to a 7.1 site default to Fluid Engine, so most modern Squarespace builds have access to the mobile editor.

How do I change font size on Squarespace mobile only?

The native way is Site Styles. Open the paintbrush icon, click Fonts, and adjust the Base Size or Responsive Scaling slider. This scales every font on mobile proportionally. For true per-device font sizes (different H1 size on mobile vs desktop, not just a uniform scale), add Custom CSS. Wrap your override in a media query targeting screens under 768 pixels and set the font-size with clamp() for smooth scaling. Body text should always be 16 pixels or larger to prevent iOS Safari auto-zoom on form inputs.

Is Squarespace good for mobile-first design?

Squarespace is good for mobile-responsive design, not mobile-first design. The editor is desktop-first, so you build the desktop layout and then adjust mobile. True mobile-first platforms (Webflow, Framer, Wix Studio) let you start in the mobile breakpoint and design outward. That said, Squarespace 7.1 with Fluid Engine handles mobile responsively well enough for 90 percent of small business sites. If your traffic is 70 percent or more mobile, consider a more mobile-first platform or commit to extensive Custom CSS overrides on Squarespace.