Display and visibility helpers

POM-specific shortcuts:

The bundled responsive Bootstrap display syntax is:

d-{value}
d-{breakpoint}-{value}

Common values include none, inline, inline-block, block, table, table-cell, flex and inline-flex; breakpoint infixes are sm, md, lg, xl.

<div class="d-none d-md-block">Visible from md upward</div>
<div class="d-block d-md-none">Visible below md</div>

Use the unprefixed class for the smallest viewport, then add breakpoint variants only where the display mode changes. For example, d-none d-md-flex hides the element below md and uses flex layout from md upward.

hidden and din are unconditional POM aliases. Prefer the responsive d-* syntax when the component should return at another breakpoint. web-full-height establishes a minimum height and allows content to grow; web-viewport fixes the height and can therefore clip overflowing content unless the component manages it deliberately.

Accessible visually hidden text

Use screen-reader-text for supplementary text that should remain available to screen readers without occupying space in the visual layout. POM includes this utility in the general compiled stylesheet, including sites without WooCommerce.

<label class="screen-reader-text" for="catalog-search">Search the catalog</label>
<input id="catalog-search" type="search" name="s">

Keep essential instructions visible. Do not combine screen-reader-text with hidden, d-none, visibility: hidden, or aria-hidden="true" when the text must remain available to assistive technology.

Focusable elements with screen-reader-text, such as skip links, become visible when they receive keyboard focus. Check that the focused element is readable and is not clipped by a surrounding container.

After a theme update changes these styles, run Settings → POM Theme → Tools → Compile assets → Compile CSS and clear the page cache on each affected site. See generated styles and scripts.

The rules belong to Visibility and display utilities under Settings → POM Theme → Advanced → Custom CSS → Component CSS. If you replace that component, compare your saved CSS with the current Theme CSS and preserve both the hidden and keyboard-focus rules. A page that replaces the general stylesheet must include equivalent rules in its own CSS. If critical CSS delays the general stylesheet, include the rules in the critical CSS as well to prevent accessible text from appearing before the full styles load.

After applying a visibility helper, check small, medium, and large widths plus keyboard focus order. An off-screen or hidden interactive element must not trap focus.

Do not hide essential content from one viewport without providing an equivalent accessible path. CSS display utilities are presentation, not authorization: hidden confidential markup is still delivered to the browser.