Optimizing block visibility ensures your site displays the right content for desktop, tablet, and mobile visitors. This guide shows you how to control which blocks appear on which devices so your site looks intentional and responsive.
Before you start
Youâll need Admin access to edit blocks on your site.
How to Change Block Visibility on Different Screen Sizes
In the steps below, you'll learn how to choose which blocks appear on mobile, tablet, or desktop screens.
Â
- Navigate to the block you want to manage.
- Hover over the block and click the Edit Block button
 in the top-right corner to open the block design settings. - Click the Settings section cogwheel
. - Scroll till you reach the Display block on section.Â
- Use the toggle buttons to control visibility, with green meaning the block shows on that type of screen size, and grey meaning itâs hidden. Even if a block is hidden from public view, you'll still see it as an admin. The block will appear a darker grey color.
- Adjust as needed. Visibility settings will be saved automatically.
You're all set! Your block is now visible only on the screens youâve selected, helping you control layout, simplify your site experience, and optimize for different devices. Nice work!
Note
Changing block visibility only affects what site visitors see based on their device. As an admin, youâll still see all blocks, even the ones hidden from public view, so donât worry if a block appears âgreyed outâ while you're editing.
Â
Next steps
Now that youâve adjusted block visibility, here are a few more ways to fine-tune your content:Â