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

1. 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:

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

3. 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

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

2. 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.

• Related Articles

• Hiding a Block on Smaller Screens

  If you want to prevent a particular block from showing on mobile devices and tablets, you can hide it in the settings. This is useful if you'd like to share certain info with desktop viewers only, or make the website shorter on small screens. Hiding ...

• Hiding a Block on a Page

  In case you may need a particular block in future, but don't want to show it on a published site, you can hide it in the settings. This way, the block will remain in the editor, but won't be visible to your visitors. Hiding a block on a page 1. For ...

• Mobile View of the Site

  One of SiteCliq's assets is an adaptive mobile version of all blocks and elements, created specifically for smaller screens. It allows you to compress the content and layout you see on the desktop into an easy-to-scroll, readable mobile version. This ...

• Adding a Custom Block

  SiteCliq editor allows you to create your site with the help of pre-designed blocks that contain a set of elements. If none of our ready-made options in the gallery meets your needs, you can select an empty custom block to build your layout from ...

• Changing the Design of a Block

  As soon as you add a block, you can start editing it to adjust the layout and match it to the overall design of your site. Most of our blocks are easily customizable, so you can change the settings of each particular element in them — for example, ...