Hide blocks on specific devices

You can hide blocks on specific devices—desktops, tablets, or phones—so you control what visitors see based on their screen size. This guide covers how to use responsive block visibility to hide blocks on specific devices and show them again.

You can hide a block from desktop visitors, show it only on mobile, or apply any combination of device settings. For example, you might hide a large image on mobile to keep the layout clean or show a click-to-call button only on mobile, where visitors are more likely to use it. Or, you can completely hide the block from your published site if you want to keep the content in the editor but not display it to visitors.

To hide a block on specific devices, follow these steps:

1. Select the block you want to hide.
2. Click the ⋮ (three dots) at the end of the block toolbar.
   • Alternatively, open List View by clicking the List View icon (three horizontal lines) at the top left of the editor, then click the ⋮ next to the block.
3. Click the Hide option from the drop-down.

4. In the “Hide block” dialog, check the box next to each device where you want to hide the block: “Hide on Desktop”, “Hide on Tablet”, or “Hide on Mobile”.
   • Or, select “Omit from published content” to keep the block in the editor but not shown on the live site.

5. Click the Apply button.
6. The block now shows a visibility indicator in List View. Hover over the visibility indicator to see which devices it is hidden on.

To show a block that has been hidden, follow these steps:

1. Open List View by clicking the List View icon (three horizontal lines) at the top left of the editor. Hidden blocks show an eye icon with a line through it next to the block name.
2. Click the ⋮ (three-dot menu) next to the hidden block.
3. Click Show to open the dialog and uncheck the device options.
4. Click the Apply button.