Note: While our most popular guides have been translated into Spanish, some guides are only available in English.
Page and block layout changes on mobile devices

Mobile browsers are smaller (and typically narrower) than desktop windows. To keep your site legible and prevent visitors from having to pinch, zoom, and scroll to see your content, Squarespace's responsive design automatically stacks blocks vertically on mobile devices.

If blocks aren't lining up the way you want them to on mobile, you can move blocks using the scenarios in this guide and video.

Watch a video

To see how this works and for tips on changing your layout for the best mobile display, watch this video:

Test with Device View

We recommend editing your site in Device View and testing how it looks on your own device.

Since everyone's layout is different, experimenting and previewing your site is the best way to refine your layout until you achieve a design you love that looks great on all devices. 

Single-column layouts in mobile view

When blocks occupy the full width of a page (with no blocks on either side), the blocks stack vertically on mobile devices, retaining the page's desktop layout.

Multiple even columns in mobile view

Adding blocks to the left or right of other blocks creates columns on a page.

Pages with multiple columns are great on desktop browsers, but can be hard to read on mobile devices. To make the content more accessible, Squarespace will move the second, third, and additional columns below the first on mobile devices. In other words, columns move from horizontal to vertical on mobile.

For example:

  • If you have three Image Blocks in a horizontal row, they will stack on top of each other from left to right order on mobile.
  • If you have three Image Blocks in a row with Text Blocks below each one that describe each image, each Image Block will have its associated Text Block stacked below it in mobile view, followed by the next image. Watch the video above to see how this works.

More intricate layouts in mobile view

With more intricate layouts where some areas have different column sizes than others, you still have control over how the blocks are ordered on mobile.

When adding blocks, there are guidelines that show how blocks will order. If a guideline runs the length of a block next to it, this tells Squarespace that the two blocks should be grouped together on all screens.

To keep a block stacked with another block, drag the block and drop it when the guideline (the horizontal line) runs the length of the other block.

Watch the video above to see how this works.

Floating blocks in mobile view

Blocks floating in a Text Block (for example, images wrapped in text) display above the Text Block in mobile view.

To learn more about floating blocks in text, visit Moving blocks.

Note: If there isn't enough text to surround the block, the block will appear next to the text. If blocks are incorrectly appearing above text in mobile view, you can resolve this by moving the block to ensure it isn't floating in the text.

Spacer Blocks

Spacer Blocks are automatically hidden on mobile for most templates.

 

Was this article helpful?
19 out of 74 found this helpful
Page and block layout changes on mobile devices