How to hide a block on Squarespace

One of the most common things I encounter as a designer is the need to hide a block on a Squarespace website.

Why? Because hiding blocks can be useful for a variety of reasons, such as allowing you to see what a page looks like without an element (without having to actually delete it) as well as making a page more usable on mobile devices (think, hide an element on mobile but display it on desktop - or vice versa).

The good news for us, is that with just a few lines of code, you can easily hide blocks without permanently deleting them.

Watch the video

Check out the YouTube video below 👇

Find your block ID

First things first, you need to install this free Squarespace ID Finder extension for Google Chrome. This allows you to simply identify the ID for any block that you want to target.

The code

Once you’ve determined the ID for the element you want to hide, navigate to Design > Custom CSS in the Squarespace editor panel. Add a new line and give it a name (e.g. hide CTA button) before entering the ID in curly brackets and setting the display to “none”. The code would look like this:

#block-id {
display: none;
}

This process hides the block on both desktop and mobile versions of your website. If you want to hide the block on mobile but display it on desktop (or vice versa) you just need to wrap the code in a media query.

For example, to hide an element on mobile (screen width of 641 pixels or less) use the following code:

@media screen and (max-width: 641px) {
#block-id {
display: none;
}
}

To hide the block on desktop but display it on mobile, just change “max-width 641 px” to “min-width 641 px”.

It’s important to note that this code will hide the block completely, not just on the live site. If you just want to see how a page looks without a certain block before you make a final decision, use the “display:none” code and then remove it once you’re finished.

---

📩 Join the inner circle to get exclusive code updates

---

With just a few lines of code, you can easily hide a block on Squarespace. Whether you’re determining how a page looks without a certain element or making different versions of a web page for desktop and mobile devices, this is one of the most useful pieces of code to have in your Squarespace catalogue.

---

Your designer

I'm Sam, an award-winning Squarespace web designer. I have worked with every type of business, building platforms for solo entrepreneurs through to multi-million dollar corporations. If you want to discuss a potential project, you can email on sam@bycrawford.com or get in touch with me here. Alternatively, you can book in a free 15-minute consultation call here.

---

Want more?