How to hide sections on mobile in Squarespace 7.1
The emergence of mobile devices has made it extremely important to have a mobile-friendly website. It makes it easier for your visitors, improves your rank in search engines, and thus your online presence. This is why we recommend Squarespace for beginners, as it automatically changes to suit the screen size of any device—a big win! But occasionally, your site looks amazing on a computer but not quite so incredible on a phone or tablet since you designed it that way.
But don't worry! With Squarespace comes the feature of adjusting what your site looks like on mobile via a small piece of code. In this blog post, we will explain how to hide elements of your site on mobile. This is useful for certain sections that sparkle on a computer, but don’t translate on a smaller screen. So come on let's get this show on the road!
Sections on Squarespace Mobile Hide: Why?
Mobile hiding sections are not the same as taking away content, but rather a new way of telling your story to your mobile users. Here’s why it’s a useful practice:
Enhanced User Experience for Mobile: Users on mobile tend to behave differently than those on desktops. This de-clutters the mobile experience, so visitors can quickly find what they're looking for. Fewer distractions make navigation easier and reading more straightforward.
Fast Loading Speed for Mobile Pages: Since mobile devices usually have less processing power and a slower connection, One of the ways we can significantly boost the speed of our webpages while they load (a key area of focus both for SEO and user satisfaction) is by minimizing the number of elements that need loading.
Improved Mobile Navigation: An overcrowded mobile menu can be frustrating. Hence, hiding those secondary sections will help you navigate better and focus on the most important CTA and content.
Clear and Straightforward Mobile Layout: A clear, uncluttered mobile layout is more engaging as well as professional. Revise Mobile Layout: You can hide sections to get a better layout on the mobile device.
Mobile Content Hierarchy: Because the screen size is smaller, it is important to content-hierarchize. Show only mobile relevant sections by hiding less important sections.
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.
Conclusion
Hiding sections on mobile in Squarespace 7.1 mobile redirection is a really effective method for making your site mobile-friendly. With proper usage and best practices we can overcome the challenges of CSS in mobile design and enable a minimalistic, easy, and engaging mobile use experience. Keep content first, test frequently, always think about the user experience. When you learn these strategies, your Squarespace website will be mobile responsive and look its best on any screen.
FAQ: Hiding Sections on Mobile in Squarespace 7.1
1. Why would I want to hide sections on mobile in Squarespace?
Some desktop-designed sections don’t translate well to smaller screens. Hiding sections on mobile improves user experience, reduces clutter, speeds up page load, and maintains visual hierarchy for mobile visitors.
2. Is hiding a section on mobile the same as deleting it?
No. Hiding a section using CSS only hides it on smaller screens; the content still exists on desktop and in the backend. It's a display rule, not a deletion.
3. How do I find the section ID in Squarespace 7.1?
Use the Squarespace ID Finder Chrome Extension. It overlays data-section IDs visually over each section of your live site so you can copy the exact one you want to hide.
4. What is the CSS code to hide a section on mobile?
Here’s the basic snippet:
@media screen and (max-width: 641px) {
section[data-section-id="YOUR-SECTION-ID"] {
display: none !important;
}
}
Replace "YOUR-SECTION-ID" with the actual ID of the section you want to hide.
5. Where do I paste the CSS code in Squarespace?
Go to Design > Custom CSS in your Squarespace dashboard and paste the code there. Don’t forget to save your changes.
6. Can I hide multiple sections at once?
Yes! Just duplicate the section[data-section-id="..."] line for each section you want to hide within the same CSS block:
@media screen and (max-width: 641px) {
section[data-section-id="id1"],
section[data-section-id="id2"] {
display: none !important;
}
}
7. Can I hide content only on desktop instead of mobile?
Yes. Use a min-width media query instead:
@media screen and (min-width: 641px) {
section[data-section-id="YOUR-SECTION-ID"] {
display: none !important;
}
}
8. Does hiding sections on mobile affect SEO?
No, hiding content with CSS doesn’t negatively impact SEO, as the content is still rendered in the HTML. Just make sure important content is accessible somewhere on mobile.
9. Can I test the mobile view in Squarespace before publishing?
Yes! Use the mobile preview icon in the top-right corner of the page editor or resize your browser window manually to below 641px width to test your changes.
10. Is this method compatible with all Squarespace 7.1 templates?
Yes. All Squarespace 7.1 templates support custom CSS and section targeting, so this method works across all layouts.
