How to hide sections on mobile in Squarespace 7.1

Having a mobile-friendly website is super important these days. It makes things easier for your visitors, helps your site rank better on search engines, and overall boosts your online presence. That's why we love Squarespace for beginners — it automatically adjusts to any device screen size, which is a huge plus!

However, sometimes when you design your site on a computer, it might not look as great on a phone or tablet. But don't worry! With Squarespace, you can tweak how your site looks on mobile by adding a bit of code.

In this blog, we'll show you how to hide certain parts of your site on mobile devices. This is handy for those sections that look awesome on a computer but just don't fit right on a smaller screen. So let's dive in and make your site shine on every device!

Step 1: SECTION DATA ID’S

In this tutorial, we're going to talk about something called "data section IDs."

So, what are they exactly? Well, data section IDs are basically unique identifiers attached to different sections of your website. They help us target specific sections when we want to make changes, like hiding them on mobile view.

Here's an example of what a data section ID looks like: section[data-section-id="651273fad7491f367199182d"]

Now, you might be thinking, "This sounds a bit complicated," but don't worry! There's a really handy tool called the Squarespace ID Finder Chrome extension that makes it super easy. It shows you all the data section IDs for every section on your website with just a click.

To use it, simply add the extension to your Chrome toolbar, open your website, and click the grid icon in the top right corner to activate it. Then, you'll see all the block codes and IDs for each section of your site.

To find a specific data section ID, just go to the section you want to hide on mobile, and look for the blue sticker that says something like "section{data-section-id...}". That's your data section ID right there! Easy, right? Now you're ready to customize your site for the best mobile experience.

Step 2:How to hide a section on mobile on a Squarespace website

If you've got a section on your website that looks great on big desktop screens but turns into a mess on mobile, don't worry! You can easily hide it on mobile devices using some custom CSS.

Here's what you do:

• Go to Design > Custom CSS in your website admin panel.

• Copy and paste this code snippet into the Custom CSS text box:

css:

/* Hiding sections on mobile */
@media screen and (max-width: 641px) {
 section[data-section-id="YOUR-SECTION-ID"] {
 display: none !important;
 }
}

• Instead of "YOUR-SECTION-ID", insert the section ID of the section you want to hide. You can find this using the Chrome extension we installed earlier.

• Click Save in the upper left corner.

• Check the mobile view in the upper right corner to see if the section disappears on mobile.

That's it! Now your website will look cleaner and more user-friendly on mobile devices.