How to Hide Block Code Elements in CSS on your Squarespace Website

In this tutorial, we will learn about "block codes,” how to identify them, and how to hide certain elements from mobile view on your website. 

Block code example

An example of what a block code looks like is this:

#block-9c4729572948_6294

How to identify block codes

Don't worry if you’re confused because there's free and user-friendly Google Chrome extensions for identifying block codes. The code identifier I use is Squarespace ID finder. Simply add the extension to your Chrome toolbar, open your site, and click the icon on the top right corner to reveal the block codes for all sections of your site.

Once installed, click the extension icon. This will show all codes on your page. To copy the code, simply click on the box containing your block code and it will automatically copy to your clipboard. Below is an example of what your website will look like once the extension is installed.

Note: If for some reason you can not install the extension, simply go to the page you want to edit, right click, choose “inspect” and it will allow you to select any UI element’s accessibility data. Example below with block ID highlighted in green.

Writing CSS

Now that you are able to identify block codes, you’ll need some basic CSS. Head over to design > custom CSS > then enter the following code and click save. IMPORTANT: REPLACE “#block-7c650aa4296c696a3798” WITH YOUR BLOCK CODE. 

@media only screen and (max-width: 768px) {
#block-7c650aa4296c696a3798 {
display: none;
 }
}

How to hide additional blocks

To hide more than one block on mobile, simply split block codes with a comma. For example:

@media only screen and (max-width: 768px) {#block-3_27_2_1_15825270281759_29502, #block-2_7_9_31_5839584829392_74929 {display: none;}
}

If you have any questions or need any help, please feel free to reach out!