Configure shortcode behavior by device
Use Device visibility to remove optional presentation at selected viewport ranges. Use responsive layout controls when the same content should adapt rather than disappear.
Visibility ranges
| Range | Width |
|---|---|
| Large | Above 992 px |
| Medium | At least 768 px and below 992 px |
| Small | At least 544 px and below 768 px |
| Extra small | Below 544 px |
Selected ranges remain visible. Clearing a range hides the element there.
Configure visibility
- Edit the row, column or component.
- Open Visibility.
- Find Device visibility.
- Keep every range where the element is needed.
- Save and update the post.
- Test one viewport inside every changed range.
POM applies visibility to supported shortcode output even when the element itself does not create a dedicated outer wrapper. A child cannot override a hidden parent.
Adapt before hiding
Prefer:
- responsive column widths;
- element-specific mobile alignment;
- responsive image sizes;
- reduced gaps and padding;
- carousel or gallery settings designed for narrower screens.
Use visibility for decorative or genuinely duplicated alternatives. Do not hide the only heading, navigation, legal information, form instruction or route to an action.
Raw attribute
When reviewing stored content, device_visibility contains the visibility classes selected by the builder. Let the builder create this value; manually inventing class combinations is error-prone.
Verification
Test at 993 px, 992 px, 768 px, 767 px, 544 px and 543 px when a layout changes at several boundaries. Also check keyboard order and screen-reader duplication when separate desktop and mobile versions exist.