How to hide elements in mobile view in Squarespace 7.1
A mobile friendly website is a must have these days. It gives your viewers a high-quality experience that ripples into a first strong impression of your brand (so they can confidently come back!) and can potentially increase sales. It also improves SEO and your Google ranking, so yes, it’s a must.
Squarespace is a flexible platform that makes customization a breeze, but with one exception... the mobile view of web pages 🙄 if you know, you know. Oftentimes, the perfect layout on desktop doesn’t look great on mobile...
Luckily we can customize the mobile view by adding some simple CSS to our website. In this tutorial, we will walk you through how to hide elements in mobile in Squarespace 7.1.
3, 2, 1, go!
FIRST THINGS FIRST: BLOCK CODES
In this tutorial we will need to identify “block codes”.
What the heck are those? Block codes target the specific element on your website. We will be using block codes to hide elements on mobile view.
Here is an example of a block code: #block-7c650aa4296c696a3798
You might think this is above your pay grade, however there’s a super handy Google Chrome extension that will magically show you the block code for every element on your website with the click of a button. Best of all, it’s free!
This Google Chrome extension is the Squarespace Collection/Block Identifier. Simply add the Chrome plugin to your toolbar, open your website, and click the “B” icon on the top right corner to enable the extension. You will immediately see the block codes for all of the sections of your site.
To quickly grab a block code, click on the box and the block code will automatically be copied to your clipboard.
THE GOOD STUFF: HIDING ELEMENTS ON MOBILE
Now that you have the Block Identifier Chrome extension — go to design > custom CSS. Add the following code:
// HIDDEN ELEMENTS ON MOBILE
@media only screen and (max-width: 768px) {#block-7c650aa4296c696a3798 {display: none;}
}Replace #block-7c650aa4296c696a3798 with the block code of the element you want to hide
Hot tip:
If you’d like to hide more than one element, simply add a comma after the block code and paste another block code after the coma. For example:
// HIDDEN ELEMENTS ON MOBILE
@media only screen and (max-width: 768px) {#block-yui_3_17_2_1_1591980633588_19122, #block-yui_3_17_2_1_1591988689014_18991 {display: none;}
}
Share this post on Pinterest!
Disclaimer: This blog post contains affiliate links. We may earn a small commission to fund our coffee drinking habit. You will not be charged extra, and you’ll keep us supplied in caffeine. It’s a win for everyone, really.
