container query
A container query adapts styling to a containing context.
Use this when The same component appears in a narrow sidebar and a wide content region.
without the term
“The card looks great in the main area but squished in the sidebar, because my media queries look at the screen width, not where the card is. Can it adapt to the space it's in?”
with the term · How do you ask a model for container query?
Use a container query for this card layout. Verify it in a sidebar and main panel while the viewport remains unchanged.
What is container query?
The component's styles respond to the width of its container rather than the viewport, so the same card can lay itself out differently in a sidebar and a main column.
Why does container query matter when vibe coding?
Viewport rules may choose the wrong layout for an embedded component.
How do you do container query?
Establish the query container and test the component at independently varying container sizes.
What goes wrong with container query?
Querying the wrong ancestor and overlooking its effect on sizing.