What visibility hidden means as a problem class #
Visibility hidden is the failure class Loupely Lens identifies when an element exists in the page’s HTML but isn’t visible to the viewer, and the cause is a CSS rule rather than the element being absent from the page. The element is there. The CSS is hiding it.
This problem class covers several distinct CSS patterns: display: none removes the element from the layout entirely; visibility: hidden hides the element while preserving the space it occupies; opacity: 0 makes the element invisible while keeping it fully interactive; and clip-path or overflow: hidden on a parent can make the element invisible by clipping it outside the visible area. Each behaves differently, and knowing which one is causing the problem determines the fix.
Why this happens on WordPress sites #
Visibility rules get applied unintentionally in several ways. A theme stylesheet may have a rule that hides elements with a specific class at certain Viewport sizes, and a Page Builder element ends up with that class. A plugin may inject a rule that hides elements matching a broad selector. An animation plugin sets opacity: 0 as an initial state and the animation never fires, leaving the element permanently invisible. A parent element has overflow: hidden and the child element is positioned outside the parent’s boundaries.
In all of these cases, the element is in the page source, it’s in the DOM, and your Page Builder settings show it as active. CSS is the only reason it’s not visible.
How Lens diagnoses a visibility conflict #
Lens captures the full CSS Cascade for the element you clicked, including the ancestor chain. When a visibility rule is active, Lens identifies which property is hiding the element, which stylesheet or JavaScript source applied it, and whether it came from the element itself or from an ancestor. The diagnosis specifies the exact mechanism: “This section is not visible because a media query in your theme’s stylesheet applies display: none to elements with this class at screens wider than 1200px.”
What the triage step provides #
When the visibility rule comes from a stylesheet, Lens generates a CSS override that removes or counteracts the hiding rule. When it comes from a JavaScript injection (like an animation plugin setting initial opacity to zero), the triage step identifies the plugin responsible and recommends checking its animation trigger settings. When the element is clipped by a parent’s overflow: hidden, the ancestor traversal data in the capture file shows exactly which parent is doing the clipping and what override is needed on that parent.