How blocks stack on mobile in the classic editor

Ensure blocks appear in the correct order on mobile devices when using the classic editor.

Last updated August 8, 2024

In the classic editor, Squarespace's responsive design automatically stacks blocks vertically on mobile devices. This helps keep your site legible and prevent visitors from having to pinch, zoom, and scroll to navigate your content.

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.

Accessing this feature

This guide is about the mobile behavior of blocks added in the classic editor, which is used on all version 7.0 sites and certain areas of version 7.1 sites. If you're using Fluid Engine, arrange your computer and mobile layouts independently. If you're not sure which editor an area of your site uses, visit Fluid Engine, Squarespace's latest content editing experience.

Watch a video

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

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.
Footer Image
  • Get help from our community

  • Get help from our community on advanced customizations.

  • Hire a Squarespace Expert

  • Stand out online with the help of an experienced designer or developer.

How blocks stack on mobile in the classic editor