How To Hide Elements on Mobile View Squarespace

In this blog tutorial, I'll show you how to hide Elements on mobile view | Squarespace

Let’s dive in..

Watch the video

Check out the YouTube video below 👇

To make this work, we need to add some custom code. Go to the Custom CSS section and paste the following code:

@media (max-width: 768px) {

#YOUR ID

{

display: none;

}

}

The YOUR-ID needs to be the unique ID of the element you are trying to hide. (Continued below the image.)

To find the unique ID of the element you want to hide, I recommend downloading the Squarespace ID Finder extension for Chrome. Once installed, click on the extension, and it will display the IDs of elements on your site.

You are looking for the “block ID”, which is the one you need to paste into the code.

In the image below, I have pasted the block ID for an image into the code, making it hidden on mobile view.

PS: Elements like this are usually block-yui IDs, so do NOT hide section IDs or collection IDs.

(Guide continues below.)

If you want to hide two or more elements, like both text and an image, simply add a comma and paste the next block ID.

This approach prevents unnecessary repetition of the same code when building out a large site.

@media (max-width: 768px) {

#YOUR ID,

#YOUR ID,

{

display: none;

}

}

Also, this method ensures that the elements remain visible on the desktop version while being hidden only on mobile view. 😊

Your designer

I'm Victor Rolf, an expert Squarespace designer .If you'd like to discuss a potential project, you can email me at victor@rolfmade.com or get in touch here. Alternatively, book a free 15-minute consultation call here.