Device Visibility

Device Visibility is an inner blocks container that shows or hides its content at three breakpoints — desktop, tablet, and mobile. Drop any block inside it and control exactly which screen sizes see that content.

How to add

Open the block inserter, switch to the Axiom Blocks category, and click Device Visibility. The block drops in as an empty container visible on all devices. Add any inner blocks inside it — headings, images, columns, other Axiom blocks.

The editor shows a label beneath the toolbar summarising the current visibility state: Visible on all devices when all three toggles are on, or a list of the active devices when some are off.

Visibility settings

The Visibility Settings panel is open by default and has one toggle per breakpoint:

All three are on by default. Disable any combination to hide the inner content at that breakpoint.

Spacing

Per-side padding and margin on the outer wrapper. The block supports Wide and Full alignment from the toolbar.

HTML output

Hiding a device adds a modifier class to the wrapper. The block's stylesheet uses media queries to apply display: none at the corresponding breakpoint.

<!-- Visible on desktop and tablet, hidden on mobile -->
<div class="wp-block-axiom-blocks-device-visibility is-hidden-mobile">
  <!-- inner blocks -->
</div>

<!-- Hidden on desktop only -->
<div class="wp-block-axiom-blocks-device-visibility is-hidden-desktop">
  <!-- inner blocks -->
</div>

When all three toggles are off, the block renders with an inline display: none regardless of breakpoint:

<div class="wp-block-axiom-blocks-device-visibility is-hidden-desktop is-hidden-tablet is-hidden-mobile" style="display: none;">
  <!-- inner blocks -->
</div>

When a device toggle is on, no modifier class is added for that breakpoint — the default state is visible.