When building a website, you may need to hide certain blocks on the desktop or mobile versions of your site, or you may need to hide a certain block altogether temporarily. In this article, you will learn how to hide a block completely on your website or only on its desktop (computer) or mobile version.

Contents:
Hiding a block
Hiding a global site header
Hiding the block only on tablets

Hiding a block

To hide a particular block, you need to click on the three dots in its upper right corner and choose one of the options: hide block on all devices, only on a computer, or only on a mobile device:



After that, you'll see an icon in the editor that indicates which devices the block is hidden for:



Tip: If you hide a block on the desktop version of your site, you can continue to edit it in the mobile editor.

Note: hiding a block on a computer now also hides it on tablets.

Don't forget to publish your site so that the changes are reflected on it.

Hiding a global site header

If you ever need to hide the global site header, you can do so using custom code. Below is the code to hide the site header on different devices.

Note: The following code must be added [in the site settings in the "Custom code" section ]() in the "CSS" tab to apply it to the entire site. Alternatively, you can add an "Embed Code" block and insert the code inside it to the CSS tab so that the code only applies to 1 page.
Tip: You can hide a non-global site header (one that is only added to 1 page) in the same way as an ordinary block, like in the previous section of this guide.

In the codes below, after the # symbol, instead of the first header, you should specify the name of the block anchor, which you can find in the block settings in the Information tab:


Tip: If you have only had 1 site header since the beginning of the site creation, its anchor will be named "header", and accordingly, the code below will not need to be changed.

Hiding the header only on smartphones:

/* Hiding the header only on smartphones */
@media (max-width: 767px) {
    #header ~ header {
        display: none;
    }
}

Hiding the header only on tablets:

/* Hiding the header only on tablets */
@media (min-width: 768px) and (max-width: 991px) {
    #header ~ header {
        display: none;
    }
}

Hiding the header only on desktops:

/* Hiding the header only on desktops */
@media (min-width: 992px) {
    #header ~ header {
        display: none;
    }
}

Hiding the header on all devices:

/* Hiding the header on all devices */
#header ~ header {
    display: none;
}

Hiding the block only on tablets

To hide a block only on tablets (devices with a width from 768 to 991 pixels), you can add the following code, where instead of anchor you need to use the name of the block anchor, which you can find in the block settings in the Information tab, similarly to the previous section of this guide.

/* Hiding the block only on tablets */
@media (min-width: 768px) and (max-width: 991px) {
   #anchor ~ section {
       display: none;
   }
}

Updated on: 04/27/2023