Create and style mobile-specific block layouts for your site.

Squarespace automatically resizes your site to look great on any device, but with Fluid Engine sections, you can arrange, resize, style, and hide blocks separately for mobile audiences.

Not what you’re looking for? Learn how other elements of your site appear in mobile devices.

Fluid Engine is available for block sections on version 7.1. Fluid Engine isn't available on version 7.0 sites.

Arrange the mobile layout

You can arrange the mobile layout of Fluid Engine sections without affecting the desktop layout. If you add new blocks to your site after editing the mobile layout, the new blocks display in the mobile layout as similarly to the desktop layout as possible. We recommend reviewing the mobile layout as you make changes to your site.

To set your section's mobile layout:

1. Open the Pages panel, then click the page with your Fluid Engine section.
2. Click Edit on the page, then click the Mobile View icon in the top-right corner.
3. Arrange and resize blocks as desired. To move a block above or below an adjacent block, click the block, then click ↑ or ↓. This is a great way to quickly rearrange blocks in your mobile layout without manually clicking and dragging.
4. Edit design options on certain blocks, like the background of a text block or the shape of a shape block. Not all blocks have mobile-specific design options.
5. Hide blocks on the mobile layout with Layers.
6. Increase or decrease the height of the grid.

What changes affect the desktop layout?

When working on a Fluid Engine section’s mobile layout, any changes made to the content of blocks affect both desktop and mobile layouts. For example:

• Adding a new link to a button block.
• Changing the text in a text block.
• Customizing design settings on a block that doesn’t have mobile-specific design options. 

Set mobile-specific block designs

In Fluid Engine, you can set mobile-specific designs for certain blocks. These are sometimes called “overrides” because they override the desktop layout settings.

To set mobile-specific block designs:

1. Open the Pages panel, then click the page with your Fluid Engine section.
2. Click Edit on the page, then click the Mobile View icon in the top-right corner.
3. Add or double-click a block that supports mobile overrides.
4. Click Design, then make changes you want for your mobile layout. Changes you make in the Design tab won't affect your design settings in the desktop layout. For the mobile layout of product blocks, you can also customize the options under Elements in the Content tab.
5. Click Save.

Hide blocks at specific browser sizes

You may want to hide blocks from visitors using mobile devices. For example, if you have a lot of text that might prevent mobile visitors from finding what they need, you can hide the text blocks on your mobile layout while keeping the text visible for desktop visitors. You can also hide blocks from desktop visitors while keeping them visible for mobile visitors.

To hide blocks at a specific browser size:

1. While editing your site, switch to the mobile layout with device view or resize your browser to the size where you want to hide the block.
2. Click Edit on the page, then click the Layers icon in the top-left corner of the Fluid Engine section. This opens a list of all blocks on the section. Hovering over a block in the list highlights it in your site content.
3. Click the eye icon next to the block or blocks you want to hide. Hidden blocks won’t be visible in your section at this browser size and will display dimmed in the layers list.
4. To hide a block at multiple browser sizes, resize your browser and repeat these steps for each browser size.

Can I hide blocks for browsers larger than what my device displays?

To hide blocks from larger browser sizes, edit your site on a device or monitor that can display that browser size. It’s not possible to hide blocks at browser sizes larger than what your device can display.

Can I hide a block at all browser sizes?

There’s not an automatic way to hide individual blocks at all browser sizes. To work on site content before making it public, disable the page until you’re ready to publish or set a page password temporarily.