What a layout constraint is #
A layout constraint is the failure class Loupely Lens identifies when an element’s position, size, or alignment is being controlled by a rule on a parent element rather than on the element itself. The section won’t center. The container has the wrong width. The element refuses to stretch the way you need it to. You’ve changed every setting on the element and nothing moves.
This is the single most common source of CSS confusion on WordPress sites, because the problem is invisible from the element you’re looking at. Page builders show you the settings for the element you click. They don’t show you that a parent element three levels up has a max-width that’s constraining everything inside it.
Why the problem is almost never on the element you clicked #
CSS layout properties on parent elements constrain their children. A parent with max-width: 800px means every child element is limited to 800px, regardless of what you set on the child directly. A parent with overflow: hidden clips everything inside it. A Flexbox or grid container controls the alignment of its children through its own properties, not through anything set on the children themselves.
So when a section won’t center, the most likely cause is not a missing text-align: center on the section. It’s a fixed width on a parent container, or a Flexbox alignment property on the parent that’s overriding the section’s own alignment settings.
How Lens diagnoses a layout constraint #
Lens captures the full ancestor chain above the element you clicked: every parent element, with the CSS properties each one applies that could be affecting the element’s layout. The ancestor traversal is always active, which means you don’t need to know where to look. Lens checks the full chain automatically.
The diagnosis identifies the specific ancestor creating the constraint and what it’s doing: “This section is not centering because its parent container has a fixed width of 960px set by your theme. The section is constrained to that width and can’t expand beyond it.” That’s the full picture in two sentences: which ancestor, which property, which origin.
What the triage step provides #
Layout constraints are usually resolved by changing a property on the constraining ancestor, not on the element itself. Lens’s triage step names the ancestor and the property to change. When the constraining rule is accessible through your Page Builder or theme settings, Lens routes you there directly with the exact setting name. When the rule is in a stylesheet that requires a custom CSS override, Lens generates the override targeting the correct ancestor element. When the constraint requires structural HTML changes (uncommon but possible with deeply nested Page Builder layouts), Lens packages the full context for developer handoff.