Updated May 2026: Squarespace added a built-in way to hide elements on mobile and desktop — no code required! I’ve updated the section below to reflect the new method, with the CSS fallback still included for older sites or edge cases.

Is Your Squarespace Site Mobile-Friendly? Here’s How to Fix It

Did you know that 58% of website traffic is coming from mobile these days! 😱⁠

One of the things I love about Sqarespace is how repsonsive (and mobile friendly) it is AS you’re designing. That being said, if you like designing on desktop first, you need to check everything on mobile before you go live.

6 Simple Steps for Mobile Magic!

When you’re looking to launch your new business you have a million things to check and perfect and as a result, a mobile-friendly website may not be at the top of the list!

That being said, it’s crucial to ensure it looks great on mobile devices. Did you know that over 50% of web traffic comes from mobile users? If your site isn’t mobile-friendly, you could be missing out on up to 70% of potential customers!

Here’s how you can make your Squarespace website mobile-friendly in just 5 simple steps:

1. Use Responsive Images

Images that resize automatically can enhance your site’s speed by 25%, keeping visitors engaged. Use the built-in image blocks for best results.

2. Check Font Sizes

Make sure your font sizes are legible on smaller screens. Aim for at least 16px for body text. This small adjustment can increase readability by 40%.

3. Optimize Navigation

Keep your menu simple and intuitive. Studies show that 60% of users prefer easy navigation, leading to higher conversion rates!

4. Resize your images before you upload

Compress your images using an online image compressor to less than 500KB.

5. Test, Test, Test!

Use Squarespace’s mobile preview tool to see how your site looks on different devices. Regular testing can improve user retention by 50%.

HERE’S A TUTORIAL OF HOW TO MOBILY OPTIMIZE YOUR SQUARESPACE WEBSITE IN 2025:

6. Hide Elements That Don’t Work on Mobile (No Code Required!)

Good news, this one got a major upgrade. Squarespace used to require custom CSS to hide elements on mobile, but not anymore (circa May 2026). You can now do this directly inside the editor, which is honestly such a game changer.

Here’s how:

Switch to mobile view in the Squarespace editor. Click on the element you want to hide, then open Layers. From there, you can toggle the element to be hidden on mobile only, or hidden on desktop only. That’s it. Done.

Even better? Squarespace now has overrides, which means you can customize block characteristics differently for each device view. So if you want a button to display as “fit” on desktop but “fill” on mobile, you can set that independently without it affecting the other view. Major flexibility upgrade for anyone who wants their mobile experience to feel intentional, not just squeezed.

By implementing these tips, you’ll not only enhance your site’s appearance but also increase engagement and conversions. Don’t let a non-mobile-friendly site hold your business back!

Adding Custom Coding

(Initial post from September 2024 — now you don’t need to use custom code)

When You Still Might Need Custom Code

The native hide/show feature covers most situations, but there are a few edge cases where CSS is still your best friend — particularly if you’re working on an older Squarespace 7.0 site, or if you have a very specific layout issue the layers panel isn’t solving.

If that’s you, here’s the code that still works:

To hide an entire section on mobile:

@media screen and (max-width: 600px) {
#section-name {
visibility: hidden !important;
display: none !important;
}
}

To hide an entire section on desktop:

@media screen and (min-width: 600px) {
#section-name-mobile {
visibility: hidden !important;
display: none !important;
}
}

To hide a single element on mobile:

@media only screen and (max-width: 768px) {
#block-8fc91e9563250a77172c {
display: none;
}
}

To find your block ID, use the “Find Squarespace IDs” Chrome extension. Navigate to your live site (not the editor), click the extension icon, and your block IDs will pop up. Copy the one you need, drop it into the CSS above, and you’re done. You can download it here.

But honestly? If you’re on a current Squarespace 7.1 site, try the Layers method first. It’s faster, requires zero code, and you won’t have to touch Custom CSS at all.

A mobile-friendly site can lead to up to a 200% increase in mobile conversions! Make sure you are looking perfect on mobile before launch!

DIY your website in a weekend in the course

Beyond The Template

PIN THE BLOG!