How to Hide Elements in Mobile View on Squarespace 7.1

---

When designing a Squarespace website for mobile devices, it can be helpful to hide certain elements that look good on desktop but not on mobile.

By hiding irrelevant elements, you can focus the user's attention on the most important information. Remember, a clean and user-friendly mobile interface is crucial for the success of your website in the growing mobile-driven digital world.

Customizing in Squarespace can be a breeze, but there’s one thing we can’t do… hiding mobile elements. Sometimes, the perfect layout on desktop, doesn’t look the greatest on mobile.

No need to worry! We can simply fix this by adding a custom CSS to hide those elements on mobile, and we are going to tell you how!

---

STEP ONE

Find your unique Block ID

This is pretty easy since we can use the google chrome extension Squarespace Finder ID

Once you’ve installed the extension, follow the next steps to find you Block ID:

• Install the google chrome Squarespace Finder ID extension.

• Go to the website you’re working on, and find the element you would like to hide on mobile view.

• Click on the Squarespace Finder ID icon in the toolbar of your google chrome extensions to activate it

• Once clicked on, your IDs will pop up on your screen for each object. Click and on the ID that is on the element you would like to hide, so it will copy to your clipboard.

---

STEP TWO

Add in your CSS Code

Now that we’ve identified your Block ID, we can start the custom CSS!

Let’s hide your elements from mobile view! Do this by going to website > scroll down to website tools > custom CSS and paste the code below

***Replace #INSERT-BLOCK-ID-HERE with the block ID code you just copied from the Squarespace finder ID extension***

@media only screen and (max-width: 768px) {
#INSERT-BLOCK-ID-HERE   {
   display: none;
 }
}

And that’s it! Your element should be hidden from mobile view!

---

HIDE MORE THAN ONE ELEMENT

If you have multiple elements to hide on your mobile, simply add a comma after each Block ID. I’ll give an example to show!

@media only screen and (max-width: 768px) {
#block-yui_3_17_2_1_1691596486743_3251, #block-yui_3_17_2_1_1691620133061_7850, #block-yui_3_17_2_1_1691689481299_22516, #block-yui_3_17_2_1_1691689481299_49590   {
   display: none;
 }
}

Hope this information helped, and you can now hide elements on mobile view in Squarespace!