Note: While our most popular guides have been translated into Spanish, some guides are only available in English.

How blocks stack on mobile

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 stacking the way you want them to, you can move blocks using the scenarios in this guide and video. 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. 

Watch a video

The video shows a version 7.0 site, but blocks and columns behave the same way on version 7.1 sites. 

Column layouts in mobile view

When blocks are stacked vertically and occupy the full width of a page (with no blocks on either side), they'll also stack vertically on mobile devices, retaining the page's computer layout. 

Adding blocks to the left or right of other blocks creates columns. When a page has columns, Squarespace moves 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'll 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.

Keep these exceptions in mind:

  • Spacer blocks are automatically hidden on mobile on all version 7.1 sites and most version 7.0 sites.
  • Blocks floating in a text block (for example, images wrapped in text) display above the text block in mobile view. If blocks are incorrectly appearing above text in mobile view, move the block to ensure it isn't floating in the text.

More intricate layouts in mobile view

In 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, you'll see 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.

move_text_block_under_image_block.png

More help

  • To preview how your site might appear on mobile, use device view. Since sites can look slightly different per device, we also recommend testing how it looks on your own mobile device.
  • For a better sense of how your site appears on mobile, edit your site from the Squarespace app.

Was this article helpful?
58 out of 376 found this helpful