One of the most asked questions I get asked is How to Hide a Section in Squarespace. The solution is pretty similar to how to hide headers and footers in Squarespace!

Hide Sections on Squarespace 7.1 Video Tutorial

Written Tutorial to Hide Sections on Squarespace 7.1

find squarespace section id

Before you add the code to hide a section, you need to download Squarespace Id Finder for Chrome.

Once installed, go to the page with the section you want to hide and activate Squarespace ID Finder, and every id for collections (yellow), sections (blue), and blocks (red) will appear.

Locate the section ID of the section you want to hide. 

Add the section id to the device code

Then, decide if you want to hide it from mobile, tablet, or desktop and update the code below with your section ID.

Add the code to site-wide css or a single page

Finally, add it to your site. You can add it on the page or you can add it sitewide. 

Sitewide - Within the Squarespace Dashboard Design > custom css > add your code > save

Single page - If you want to only add the code to a single page: Page > Settings > Advanced > Add the code <style> </style> and in between the style brackets add the code below. It will look like this:

Save

Whether you add the code to a single page or site-wide, don’t forget to hit the save button!

CSS Code to Hide a Single Squarespace Section on 7.1

Here is the CSS code to hide different sections on different devices.

Code to Hide On Mobile

Code to Hide on Tablet

Code to hide on mobile

That’s how you hide sections on Squarespace 7.1 on desktop, mobile, and tablet!

Related Squarespace Posts

• Update the Social Share Image on Squarespace Video Tutorial

• AddThis Share Buttons for Squarespace 7.1

• How to Create a Squarespace Anchor Link in 7.1

• How To Create A Linktree In Squarespace

Are You On Pinterest?

If you enjoyed this post please share it, thanks!