Use device visibility

The Device visibility setting controls whether a supported row, column, or component is shown in each of four viewport ranges. By default, all four ranges are enabled.

The four ranges

The checkboxes represent where the component remains visible. Clear a range to hide the rendered output there.

Change visibility

1. Edit the row, column, or component.
2. Open its Visibility group.
3. Find Device visibility.
4. Leave selected every range where the content should appear.
5. Save the dialog and update the post.
6. Test one width inside every affected range.

For Section, Row, and Column blocks, use the device buttons beside responsive controls to change the Gutenberg canvas width. The active device is shared by width, offset, spacing, border, background, and visibility previews, so review all settings for that range before moving to the next one. Content hidden at the active range remains selectable in the editor and is marked as hidden; it is not removed from the editing canvas.

The theme applies the selected visibility to the component's frontend output, including saved builder content whose original component callback did not provide its own visibility handling.

Icon Box and Gap expose the same four independent device controls. For Icon Box, the visibility applies to the icon and all its child text together.

For supported custom CSS, the block editor and Page Builder use the same independent classes: web-hide-on-lg, web-hide-on-md, web-hide-on-sm, and web-hide-on-xs.

Use it for presentation, not meaning

Appropriate uses include:

• hiding a decorative background treatment on a narrow screen;
• removing a secondary visual that repeats information already present;
• selecting one of two equivalent layouts when both cannot adapt cleanly.

Do not hide the only navigation, legal notice, form instruction, heading, or call to action. If two equivalent versions exist, ensure only the intended version is exposed in each range and that both remain maintained.

Diagnose an unexpected result

If a component disappears:

1. inspect its own visibility settings;
2. inspect the containing column and row;
3. test the exact viewport width rather than relying on a device name;
4. update the post and reload the public page.

A visible child cannot override a hidden parent.