Articles on: Site editing

Hiding a block on a desktop

If you want to show a particular block only on mobile devices and tablets, you can hide it on desktops with the help of a custom code.

Important: this option is available for Pro sites only.

Step 1. Getting a block's anchor name or ID

To hide a regular block, you need to know its anchor, and to hide the header block - its ID. For that, hover over the block and click on the "gear" to open its settings:

Make sure that the Stretch to full height option is deactivated:

Open the Info tab and copy the block's anchor name (1) if it is a regular block or the ID (2) for the header:

Step 2. Hiding a block via custom code

Important: This option is available only for Pro subscription.

Open the global settings of your site and navigate to the Custom code tab:

Open the CSS tab and paste one of the snippets depending on which block you are hiding.

for a regular block:

@media (min-width: 768px) { #anchor ~ section { display: none; } }

for a header:

@media (min-width: 768px) { #blockId-xxxxxxxxxxxx { display: none; } }

Important: replace the #anchor with the block anchor that you got in the first step. If the header is being hidden, replace xxxxxxxxxxxx with the real block ID.

Click Save for the changes to appear live.

Updated on: 04/15/2023

Was this article helpful?

Thank you!