Responsive Visibility — Show or Hide Blocks by Device, Custom Breakpoints & Conditions for WordPress

Responsive Visibility adds block visibility controls to every Gutenberg block. You choose which screen sizes a block shows on, and the plugin hides it on the rest with CSS media queries. There is no custom CSS to write and nothing to configure in your theme. To hide a block on mobile but keep it on desktop, open the block settings in the editor sidebar and switch the device off.

Most visibility plugins give you three fixed sizes. Responsive Visibility lets you define your own custom breakpoints instead, so you can add a widescreen rule for large monitors, a small-phone rule, or whatever your layout needs, and name each one. You manage them on a single settings page, the way Elementor handles breakpoints.

A few things people use it for: hiding a large hero image on phones to cut load time, showing a different call to action on desktop, or keeping a sidebar widget off small screens. Any block becomes a conditional block without a shortcode or a line of code.

For a walkthrough, watch this tutorial:

How It Works (3 Steps)

Edit any block in the Gutenberg editor and open the Responsive Visibility panel in the sidebar.

Pick the devices to hide it on — mobile, tablet, desktop, or any custom breakpoint you defined.

Save. The block is hidden on exactly those screens — no custom CSS, no theme edits, no shortcodes.

Why Responsive Visibility?

Unlimited custom breakpoints — not just mobile/tablet/desktop. Define any number of named device ranges and the plugin generates the matching CSS media queries automatically.

Cache-friendly — visibility uses CSS classes and media queries, so every visitor gets the same HTML. It works with any caching plugin and updates live as the screen resizes.