Container queries

Level 6 of 9

Your goal

Make .card a container with container-type: inline-size, then use @container (min-width: 300px) to widen .badge from 100px to 200px. The card's content is 210px wide on the 420px stage (badge stays 100px) and 350px on the 700px stage (badge becomes 200px).

Must usecontainer-type

Checked at 2 stage widths (420px, 700px) — every stage below has to match.

stage 420px

stage 700px

target content boxtarget outer edge (green = matched, red = not yet)

Feedback updates as you type, and your CSS is saved in this browser. Exact target numbers are in the Target panel.