Responsive Design Is Not What You Think It Is
“Is the site responsive?" is a question that gets asked on every single project.
And the answer, if you're building on Squarespace, is always yes.
Squarespace sites are responsive by default. The platform handles the reflow of content from desktop to mobile automatically. Layouts restructure, images scale, and navigation collapses into a hamburger menu.
Job done? Not remotely.
What Squarespace handles automatically is the mechanical part of responsive design: making sure content fits on smaller screens. What it doesn't handle is the design part: ensuring that the content is actually effective on those screens. These are profoundly different things, and the gap between them is where most Squarespace sites underperform on mobile.
The Breakpoint Myth
When most designers think about responsive design, they think about breakpoints: the pixel widths at which a layout changes. Desktop at 1200px and above. Tablet at 768px to 1199px. Mobile below 768px. Design for three sizes, and you've covered everything.
This mental model is outdated and, on Squarespace, actively misleading. The real world of screen sizes is a continuous spectrum, not three discrete categories. An iPhone 16 Pro Max has a viewport width of 430px. An iPhone SE has 375px. An iPad Mini in portrait is 768px. An iPad Pro in landscape is 1366px. A Surface Pro is 912px. A standard laptop is 1440px. An ultrawide monitor is 2560px. Users on Samsung Galaxy Folds see both 280px (folded) and 882px (unfolded).
Your site exists on all of these screens, and it needs to work on all of them. Not just "fit" on all of them. Work.
Squarespace 7.1 uses a primary breakpoint at 768px for the transition between desktop and mobile layouts. The Fluid Engine repositions blocks at this breakpoint, stacking horizontal layouts into vertical columns. But what happens at 800px? At 900px? At 500px? At 1800px? Your site is live at all of these widths, and the layout at each one is determined by the interaction between Squarespace's responsive rules and your design decisions.
What Squarespace Does Automatically (And Where It Falls Short)
When a Squarespace page crosses the 768px breakpoint from desktop to mobile, the Fluid Engine does the following: multi-column layouts collapse to single columns, with blocks stacking top-to-bottom in their DOM order. Images scale to fit the container width. Text reflows within its new container. Section padding may adjust. The header navigation switches from a horizontal menu to a hamburger.
Here's what it doesn't do. It doesn't change font sizes (unless you've explicitly set different sizes for mobile in Site Styles, which only offers limited control). It doesn't hide content that's irrelevant on mobile. It doesn't change the order of blocks to prioritise the most important content for mobile users. It doesn't adjust spacing between elements that may now be stacked vertically rather than side by side. It doesn't resize images that are now in a single column but were optimised for a three-column grid.
The result is that the default mobile experience on many Squarespace sites is technically responsive (everything fits) but practically poor (the page is too long, text is either too large or too small, spacing is inconsistent, and the content order doesn't reflect mobile user priorities).
The Fluid Engine's Grid Reality
The Fluid Engine is a CSS Grid-based layout system. On desktop, you place blocks on a 24-column grid within each section, positioning them precisely using drag-and-drop. On mobile, the grid collapses and blocks reorder based on their position in the underlying HTML.
This is where understanding the DOM becomes practically important. When you drag a block to a specific position on the desktop grid, you're setting both its visual position (where it appears in the layout) and its source order (where it sits in the HTML). On mobile, visual positioning is overridden by the grid collapse, and blocks revert to their source order.
This means that a desktop layout where an image is on the left and text is on the right will, on mobile, display the image first and text second (because left-positioned content typically comes first in the DOM). If the text is the more important element and should appear first on mobile, you have a problem that Squarespace's default responsive behaviour doesn't solve.
Squarespace 7.1 introduced Block Hiding, which lets you hide specific blocks on mobile. This is useful for removing decorative elements that add visual interest on desktop but waste space on mobile. However, hiding a block doesn't remove it from the DOM. The content is still loaded, still parsed, and still consumes bandwidth. It's just not displayed. For performance purposes, a hidden block is identical to a visible one.
The upcoming Mobile Overrides feature gives designers independent control over mobile layouts, effectively allowing different block arrangements for desktop and mobile. This has been transformative. Managing mobile layout requires careful attention to source order during the desktop design phase, supplemented by custom CSS for reordering, hiding, or resizing elements at specific breakpoints.
Designing for the Space Between
Rather than designing for three fixed widths and hoping the transitions work, a more effective approach is to design for the content first and let the layout respond to the content's needs.
Start with the mobile layout. This isn't just because Google uses mobile-first indexing (though it does). It's because mobile constraints force you to make decisions about content priority that improve the design at every screen size. If a section of content isn't important enough to include on a 375px-wide screen, ask whether it's important enough to include at all.
From the mobile layout, expand outward. At what width does the single-column layout start to feel wasteful? That's where a two-column layout might begin. At what width does the text line length exceed 75 characters? That's where a max-width constraint or additional column should be introduced. At what width does the header navigation have enough room to switch from hamburger to horizontal? These are content-driven breakpoints, and they produce better results than arbitrary device-width breakpoints.
In Squarespace, you can't set custom breakpoints through the visual editor. The 768px mobile breakpoint is fixed. But you can add custom CSS media queries that apply styles at any width:
/* Styles for screens between 768px and 1024px */
@media screen and (min-width: 768px) and (max-width: 1024px) {
.your-section h2 {
font-size: 28px;
}
}
/* Styles for very large screens */
@media screen and (min-width: 1600px) {
.page-section .content-wrapper {
max-width: 1200px;
margin: 0 auto;
}
}
The second example is particularly important and often overlooked. On very large monitors, Squarespace's full-width sections can stretch content uncomfortably wide. Adding a max-width constraint on wide screens prevents text from becoming unreadably long and images from scaling beyond their natural resolution.
Touch Targets and Mobile Interaction
Responsive design isn't just about layout. It's about interaction. A button that's easy to click with a mouse cursor at 14px tall becomes nearly impossible to tap accurately with a finger at the same size. Google's own guidelines specify a minimum touch target size of 48 x 48 CSS pixels, with at least 8px of space between adjacent targets.
In Squarespace, button sizing is controlled through Site Styles (which sets a global button style) and individual block settings. The default button sizes are generally adequate, but custom-styled buttons, inline text links in navigation, and form elements can easily fall below the minimum touch target size.
Links within body text are a particular problem. On desktop, a hyperlinked word within a paragraph is easy to click precisely. On mobile, tapping the correct word in a line of text requires precision that most fingers can't provide, especially on bumpy train journeys or while walking. If a link is important (and if it's not important, why is it there?), make it stand out visually and consider whether it should be a button or a clearly separated link element on mobile.
Images at Every Width
Squarespace serves responsive images using the srcset attribute, which provides the browser with multiple versions of each image at different widths. The browser then chooses the most appropriate version based on the device's screen width and pixel density. This is excellent for performance, because a mobile phone downloads a smaller image than a desktop computer.
However, the image you upload is the starting point. If you upload a 5000px-wide image, Squarespace will generate smaller versions, but it still stores and processes the original. More importantly, the generated versions are simply scaled-down copies of the same image. They don't change the crop, the composition, or the focal point.
An image that works beautifully in a full-width desktop section (wide, with the subject slightly off-centre) may look poor when scaled to a mobile screen (now very small, with the subject barely visible). Squarespace's focal point feature helps with background images in sections, but it doesn't apply to images in regular blocks.
The professional approach is to consider how each significant image will appear at mobile widths during the design phase. If the desktop image won't work on mobile, you may need to upload a different crop for mobile (using Block Hiding to show/hide the appropriate version at each breakpoint) or choose images that work at both wide and narrow aspect ratios.
Testing Beyond the Preview
Squarespace's editor includes a mobile preview toggle that shows an approximation of the mobile layout. It's useful but insufficient. The preview uses a fixed width, doesn't account for actual device rendering quirks, doesn't show how touch interactions feel, and can't replicate real-world conditions like slow network speeds.
Test on actual devices. At minimum, test on a recent iPhone (Safari), a recent Android phone (Chrome), an iPad, and a laptop at both standard (1440px) and wide (1920px) resolutions. If you don't have access to multiple devices, BrowserStack and similar services provide virtual device testing. Resize your browser window slowly from wide to narrow and watch how the layout responds at every width, not just the three canonical breakpoints.
Pay attention to these things specifically: text line length at every width (stays within 45 to 75 characters?), spacing between elements after they stack vertically, image proportions and composition at narrow widths, touch target sizes on all interactive elements, and scroll depth (how far does a visitor need to scroll on mobile to reach the primary call to action?).
Responsive design is not a checkbox. It's not something Squarespace "handles for you." The platform provides the mechanical framework, but the design decisions that determine whether a site is genuinely effective across screen sizes are yours. Treating mobile as an afterthought, something you check at the end rather than design for from the beginning, is the most common and most costly mistake in modern Squarespace design.
Related Articles
