Make components responsive to their parent. Not the viewport.
In the demo, the icon changes based on the content’s height. All with CSS container queries.
Step 1 - declare a container.
Set container-type: size; on the wrapper (optionally container-name: box;).
Step 2 - define a default state.
Use .content:after { content: "default"; } or your base icon.
Step 3 - react to the container, not the page.
Write @container (height > 60px) { .content:after { content: "state-1"; } }.
Add another for a larger breakpoint, e.g. (height > 240px).
As the content grows or shrinks, the pseudo-element swaps automatically. No JavaScript. No viewport media queries. Works inside grids, flex layouts, and nested components.
Support is solid in modern browsers with almost 93%.
Ship a sensible default so it still looks fine where @container isn’t supported.
To learn more tips about CSS, make sure to join my newsletter below ❤️