{"id":520,"date":"2023-05-20T15:22:28","date_gmt":"2023-05-20T14:22:28","guid":{"rendered":"https:\/\/greatsite.dev\/makegreatsite\/docs\/site-editing\/hiding-a-block-on-different-devices\/"},"modified":"2023-05-20T15:28:22","modified_gmt":"2023-05-20T14:28:22","slug":"hiding-a-block-on-different-devices","status":"publish","type":"docs","link":"https:\/\/greatsite.dev\/makegreatsite\/docs\/site-editing\/hiding-a-block-on-different-devices\/","title":{"rendered":"Hiding a block on different devices"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Hiding a block<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">1. 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:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"465\" src=\"https:\/\/greatsite.dev\/makegreatsite\/wp-content\/uploads\/eng-1_3cbtc6-1024x465.png\" alt=\"\" class=\"wp-image-521\" srcset=\"https:\/\/greatsite.dev\/makegreatsite\/wp-content\/uploads\/eng-1_3cbtc6-1024x465.png 1024w, https:\/\/greatsite.dev\/makegreatsite\/wp-content\/uploads\/eng-1_3cbtc6-300x136.png 300w, https:\/\/greatsite.dev\/makegreatsite\/wp-content\/uploads\/eng-1_3cbtc6-768x348.png 768w, https:\/\/greatsite.dev\/makegreatsite\/wp-content\/uploads\/eng-1_3cbtc6-1536x697.png 1536w, https:\/\/greatsite.dev\/makegreatsite\/wp-content\/uploads\/eng-1_3cbtc6.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">2. After that, you&#8217;ll see an icon in the editor that indicates which devices the block is hidden for:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"408\" src=\"https:\/\/greatsite.dev\/makegreatsite\/wp-content\/uploads\/eng-2_n56ndp-1024x408.png\" alt=\"\" class=\"wp-image-522\" srcset=\"https:\/\/greatsite.dev\/makegreatsite\/wp-content\/uploads\/eng-2_n56ndp-1024x408.png 1024w, https:\/\/greatsite.dev\/makegreatsite\/wp-content\/uploads\/eng-2_n56ndp-300x120.png 300w, https:\/\/greatsite.dev\/makegreatsite\/wp-content\/uploads\/eng-2_n56ndp-768x306.png 768w, https:\/\/greatsite.dev\/makegreatsite\/wp-content\/uploads\/eng-2_n56ndp-1536x612.png 1536w, https:\/\/greatsite.dev\/makegreatsite\/wp-content\/uploads\/eng-2_n56ndp.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Tip:\u00a0<\/strong>If you hide a block on the desktop version of your site, you can continue to edit it in\u00a0<a href=\"https:\/\/greatsite.dev\/makegreatsite\/docs\/site-editing\/editing-of-the-sites-mobile-version\/\" target=\"_blank\" rel=\"noreferrer noopener\">the mobile editor<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Note:\u00a0<\/strong>hiding a block on a computer now also hides it on tablets.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Hiding a global site header<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Note:\u00a0<\/strong>The following code must be added [in the site settings in the &#8220;Custom code&#8221; section ]() in the &#8220;CSS&#8221; tab to apply it to the entire site. Alternatively, you can add an &#8220;Embed Code&#8221; block and insert the code inside it to the CSS tab so that the code only applies to 1 page.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Tip:\u00a0You 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.<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In the codes below, after the\u00a0#\u00a0symbol, instead of the first\u00a0header, you should specify the name of the block anchor, which you can find in the block settings in the\u00a0<strong>Information<\/strong>\u00a0tab:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"486\" src=\"https:\/\/greatsite.dev\/makegreatsite\/wp-content\/uploads\/en_e608sd-1024x486.png\" alt=\"\" class=\"wp-image-524\" srcset=\"https:\/\/greatsite.dev\/makegreatsite\/wp-content\/uploads\/en_e608sd-1024x486.png 1024w, https:\/\/greatsite.dev\/makegreatsite\/wp-content\/uploads\/en_e608sd-300x142.png 300w, https:\/\/greatsite.dev\/makegreatsite\/wp-content\/uploads\/en_e608sd-768x364.png 768w, https:\/\/greatsite.dev\/makegreatsite\/wp-content\/uploads\/en_e608sd-1536x729.png 1536w, https:\/\/greatsite.dev\/makegreatsite\/wp-content\/uploads\/en_e608sd.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Tip: <\/strong>If you have only had 1 site header since the beginning of the site creation, its anchor will be named &#8220;header&#8221;, and accordingly, the code below will not need to be changed.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><br><strong>Hiding the header only on smartphones:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code has-pale-cyan-blue-background-color has-background\"><code>\/* Hiding the header only on smartphones *\/\r\n@media (max-width: 767px) {\r\n    #header ~ header {\r\n        display: none;\r\n    }\r\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Hiding the header only on tablets:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code has-pale-cyan-blue-background-color has-background\"><code>\/* Hiding the header only on tablets *\/\r\n@media (min-width: 768px) and (max-width: 991px) {\r\n    #header ~ header {\r\n        display: none;\r\n    }\r\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Hiding the header only on desktops:<\/p>\n\n\n\n<pre class=\"wp-block-code has-pale-cyan-blue-background-color has-background\"><code>\/* Hiding the header only on desktops *\/\r\n@media (min-width: 992px) {\r\n    #header ~ header {\r\n        display: none;\r\n    }\r\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Hiding the header on all devices:<\/p>\n\n\n\n<pre class=\"wp-block-code has-pale-cyan-blue-background-color has-background\"><code>\/* Hiding the header on all devices *\/\r\n#header ~ header {\r\n    display: none;\r\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Hiding the block only on tablets<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">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\u00a0anchor\u00a0you need to use the name of the block anchor, which you can find in the block settings in the\u00a0<strong>Information<\/strong>\u00a0tab, similarly to the previous section of this guide.<\/p>\n\n\n\n<pre class=\"wp-block-code has-black-color has-pale-cyan-blue-background-color has-text-color has-background\"><code>\/* Hiding the block only on tablets *\/\r\n@media (min-width: 768px) and (max-width: 991px) {\r\n   #anchor ~ section {\r\n       display: none;\r\n   }\r\n}<\/code><\/pre>\n","protected":false},"featured_media":0,"parent":111,"menu_order":19,"comment_status":"open","ping_status":"closed","template":"","doc_tag":[],"class_list":["post-520","docs","type-docs","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/greatsite.dev\/makegreatsite\/wp-json\/wp\/v2\/docs\/520","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/greatsite.dev\/makegreatsite\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/greatsite.dev\/makegreatsite\/wp-json\/wp\/v2\/types\/docs"}],"replies":[{"embeddable":true,"href":"https:\/\/greatsite.dev\/makegreatsite\/wp-json\/wp\/v2\/comments?post=520"}],"version-history":[{"count":1,"href":"https:\/\/greatsite.dev\/makegreatsite\/wp-json\/wp\/v2\/docs\/520\/revisions"}],"predecessor-version":[{"id":525,"href":"https:\/\/greatsite.dev\/makegreatsite\/wp-json\/wp\/v2\/docs\/520\/revisions\/525"}],"up":[{"embeddable":true,"href":"https:\/\/greatsite.dev\/makegreatsite\/wp-json\/wp\/v2\/docs\/111"}],"next":[{"title":"Adding blocks with tabs","link":"https:\/\/greatsite.dev\/makegreatsite\/docs\/site-editing\/adding-blocks-with-tabs\/","href":"https:\/\/greatsite.dev\/makegreatsite\/wp-json\/wp\/v2\/docs\/526"}],"prev":[{"title":"Translation of the text parts in site settings","link":"https:\/\/greatsite.dev\/makegreatsite\/docs\/site-editing\/translation-of-the-text-parts-in-site-settings\/","href":"https:\/\/greatsite.dev\/makegreatsite\/wp-json\/wp\/v2\/docs\/509"}],"wp:attachment":[{"href":"https:\/\/greatsite.dev\/makegreatsite\/wp-json\/wp\/v2\/media?parent=520"}],"wp:term":[{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/greatsite.dev\/makegreatsite\/wp-json\/wp\/v2\/doc_tag?post=520"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}