Hiding Specific Elements on Mobile View Squarespace 7.1
With over 50% of web traffic coming from smartphones in 2022, having a mobile-friendly website isn't just a bonus—it's a necessity.
It's the gateway to delivering a top-notch experience to your viewers, crafting that all-important initial impression of your brand, and most likely giving your sales figures a delightful boost. Plus, it's a superhero when it comes to SEO and Google ranking! So, yeah, it's pretty much a non-negotiable must-have.
Now, here's where Squarespace, our trusty customisation companion, enters the chat.
We love Squarespace (haven’t you heard) and how easy it makes crafting personality packed websites and page layouts.
But (and there's always a 'but,' right?) the mobile view of web pages can be a tad tricky to perfect. Sometimes, that pristine desktop layout that you spent hours working on loses its charm on mobile screens.
But don’t panic babe! We've got your back with a nifty CSS trick that'll have your mobile view looking sleek and stylish in no time.
Step 1: Squarespace block codes
First, we need to talk about "block codes." These little wonders are what we'll use to pinpoint specific elements on your Squarespace website.
Now, this does require a little code copy and paste, but don’t stress! There's a handy Google Chrome extension that'll do the heavy lifting for you. It's called the Squarespace ID Finder, and it's an absolute game-changer.
Just add it to your Chrome toolbar, visit your website, click the icon in the top right corner (it’s a square made up of 9 smaller squares), and voila! Unique block codes for each element of your Squarespace site will appear like magic.
To snag a block code, just click on the box, and it'll be instantly copied to your clipboard.
This is how the extension will look in your toolbar
Once you’ve turned the Chrome extension on, this is how your Squarespace website will appear, with unique block codes for each element
Step 2: Making CSS tweaks for the mobile view of your Squarespace site
Now, for the exciting part—making those mobile tweaks. Armed with the Squarespace ID Finder extension, head over to Website > Website Tools (under Utilities) > Custom CSS and add the following code:
// HIDDEN ON MOBILE VIEW
@media only screen and (max-width: 768px) {#block-e6a7c00c9c7b84093e0b {display: none;}
}
Simply replace #block-e6a7c00c9c7b84093e0b with the unique ID you want to hide.
And here's a pro tip: if you want to hide more than one element, just toss in a comma after the block code and add another one like the example below. It’s that simple!
// HIDDEN ON MOBILE VIEW
@media only screen and (max-width: 768px) {#block-e6a7c00c9c7b84093e0b, #block-a8935bce0cbf0d22a630, #block-2ce21a526ec6614189d4 {display: none;}
}
