How to Hide Blocks and Sections On Mobile in Squarespace
Have you ever completed the design of a page on your Squarespace website on desktop, sat back and admired your handiwork, and then took a look at the mobile version and thought…damn, that looks like shit.
Squarespace’s Fluid Engine in 7.1 has been a game-changer for making Squarespace website’s more mobile responsive, but sometimes what looks good on desktop will never look good on mobile.
Sometimes just eliminating an image (or any block for that matter) or even an entire section will do the trick.
All it takes is a little CSS and you can hide blocks and sections on mobile in Squarespace and improve the mobile responsiveness of your Squarespace website.
Housekeeping
You’ll need to install the Squarespace Block Identifier extension into Google Chrome if you haven’t already.
If you’re working in Squarespace and doing any sort of CSS, it’s a must.
It’s super easy to use. Once installed, just click on the icon to see every ID from collections, index pages, sections, and blocks on your Squarespace page. Then, you can simply click on the ID to copy it and use it in your own code.
Go to the Affected Page
First, find the page where you want to hide blocks and sections on mobile.
Whether it’s a block (like an image block, shape block, button…you get it) or a section, you will marvel at how easy this is to do.
Go to Website > Website Tools > Custom CSS
Add this code:
/* Describe what you’re hiding from mobile so you don’t forget*/
@media screen and (max-width: 768px) {
#block or section id goes here {
display:none !important;
}
}
Then select the Squarespace ID Finder icon extension from your browser.
Find the block or section ID or the block or section you want to hide from mobile.
Click on it—you’ve just copied it to your clipboard! (Damn, that was easy!)
Do This to Hide a Block
Now paste the block ID into CSS where it says “#block or section id goes here.”
Select all of this #block or section ID goes here and paste the block ID you just copied, like so:
@media screen and (max-width: 768px) {
#block-yui_3_17_2_1_1693420479413_138967 {
display:none !important;
}
}
View your changes on mobile by selecting the mobile icon in the upper right corner of Squarespace to make sure you’ve hidden what you meant to hide. Do this before you select save.
If all looks good, select Save and enjoy the rest of your day!
Do This to Hide a Section
You’re going to do the exact same thing as above, it’s just going to look a little different.
Again, select all of this #block or section ID goes here, and paste the block ID you just copied, like so:
@media screen and (max-width: 768px) {
section[data-section-id="651ebf0e1a733669f8ddcc82"] {
display:none !important;
}
}
View your changes on mobile by selecting the mobile icon in the upper right corner of Squarespace to make sure you’ve hidden what you meant to hide. Do this before you select save.
If all looks good, select Save and pat yourself on the back for being awesome and taking care of shit all by yourself!
Was this helpful?
Don’t you feel empowered now that you know you can manage this on your own? It takes, like, 5 minutes! Let me know what other burning Squarespace questions you have so I can continue to offer free, helpful advice. Drop it in the comments. 👇
This page contains affiliate links
