How to Hide a Section on Squarespace
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!
Table of Contents Show
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:
<style>
/* Hide this on Mobile */
@media screen and (max-width:767px) {
[data-section-id="enter-id-here"] {
display: none;
}
}
</style>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
/* Hide this on Mobile */
@media screen and (max-width:640px) {
[data-section-id="enter-id-here"] {
display: none;
}
}Code to Hide on Tablet
/* Hide this on Tablet */
@media screen and (max-width:768px) {
[data-section-id="enter-id2-here"] {
display: none;
}Code to hide on mobile
/* Hide this on Desktop */
@media screen and (min-width:767px) {
[data-section-id="enter-id-here"] {
display: none;
}
}That’s how you hide sections on Squarespace 7.1 on desktop, mobile, and tablet!
Related Squarespace Posts
Are You On Pinterest?
If you enjoyed this post please share it, thanks!
