Device Visibility

Device Visibility is an inner blocks container that shows or hides its content at three breakpoints — desktop, tablet, and mobile. Drop any blocks 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 state: Visible on all devices when all three toggles are on, or a list of the active devices when some are off.

Do you need this block?

Every Axiom block now carries its own Visibility control in Settings → Advanced — you can hide an Advanced Section, a Counter, or a Pricing Table on mobile without wrapping it in anything.

Reach for the Device Visibility block when you want to hide a group of blocks together, or blocks that aren't Axiom blocks — a core Image plus a core Paragraph plus a button, all hidden on mobile as one unit. For a single Axiom block, use its own Visibility control instead and skip the wrapper.

Visibility settings

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 matching 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.