I'm building a media object (avatar + text + actions) that lives in a sidebar, a wide feed, and a narrow modal. Media queries were useless because the component's width has nothing to do with the viewport width in those contexts.
I wrote a prompt that forces container queries with a named container and a documented set of breakpoints tied to the component, not the page. The part I had to be explicit about was requiring container-type: inline-size on the wrapper and forbidding any @media rules at all.
Sharing the prompt in case it saves someone the three rewrites it took me.
Create a self-contained "media object" component (avatar, heading, two lines of text, an actions row) in HTML + CSS that adapts to ITS OWN width using container queries.
- Wrap it: the parent sets `container-type: inline-size; container-name: media`.
- Define exactly two container breakpoints: `@container media (min-width: 28rem)` switches from stacked to horizontal; `@container media (min-width: 44rem)` moves the actions row inline to the right.
- Absolutely no `@media` (viewport) queries. If you think you need one, use a container query instead and say why in a comment.
- Spacing from a 4px base scale; use `gap`, never margins for sibling spacing.
- Avatar uses `aspect-ratio: 1` and `object-fit: cover`, sized in `rem` not px.
- Include a short demo with the same component placed in a 24rem column and a 60rem column so the two layouts are visible at once.
List the two breakpoints and what changes at each before the code.