How to Hide Blocks on Mobile or Desktop in Squarespace (No Code Needed)
Ever wanted a section to look one way on desktop and completely different on mobile? Until recently, you'd need custom CSS just to hide a block on one device. Not anymore.
Squarespace just rolled out an update that lets you hide blocks on desktop or mobile with a few clicks. No code required.
Two ways to hide blocks
You've got two options:
Layers panel - Shows every block in your section at once
Right-click menu - Quick access for individual blocks
Method 1: The Layers panel
The Layers panel gives you a bird's-eye view of everything in a section.
How to open it
Click the Layers icon (on the left-hand side beside the “+ Add Block” button) while editing a section. You'll see a list of every block - text, images, buttons, all of it. Click any block name in the list and it'll highlight blue on your page so you know exactly what you're working with.
Hiding blocks with the eye icon
See that little eye icon next to each block name? Click it to hide the block. Click it again to bring it back.
The view matters
Here's the important part: the Layers panel is tied to whichever view you're in.
If you're in desktop view and click the eye icon, you're hiding that block on desktop only. It'll still show up on mobile.
Want to hide something on mobile? Switch to mobile view first, then use the Layers panel to hide it there.
Quick tip on reordering
You can also drag blocks up and down in the Layers list to change their stacking order. The block at the top sits in front of everything else.
Method 2: Right-click menu
This one's faster when you're dealing with a single block.
How it works
Right-click any block and you'll see options like Copy, Duplicate, Delete, and:
Hide on desktop
Hide on mobile
The cool thing? This works from any view. You can be in desktop view, choose "Hide on mobile," and that block will stay visible on desktop but disappear on mobile.
Finding hidden blocks
Once you hide a block on a device, you can't right-click it there anymore since it's invisible. To change its settings, go to the view where it's still visible.
If you ever lose track of what's hidden where, open the Layers panel. It shows all blocks, even the hidden ones, so you can always get your bearings.
Watch out for inherited settings
When you duplicate a block, it inherits the hide settings from the original. So if you duplicate something that's hidden on mobile, the duplicate will also be hidden on mobile. Just open the Layers panel in mobile view and toggle the eye icon to fix it.
Final Thoughts
Hiding blocks on different devices is now as simple as a few clicks. Play around with the Layers panel and right-click menu to see what works for your layout. With a little practice, you'll be creating designs that feel perfectly tailored for both desktop and mobile visitors - no code needed.
