Boss: the responsive card
Level 9 of 9Your goal
.card is a flex row (60% of the stage, 20px gap) holding a 100 × 40 badge and a 200 × 60 body. Make the card a container and widen the badge to 200px when the card's content is at least 300px wide. At viewports of 500px or narrower, stack the badge and body in a column. Expected: on the 420px stage, a column with a 100px badge; on the 700px stage, a row with a 200px badge.
Must use
container-typeflex-directionChecked at 2 stage widths (420px, 700px) — every stage below has to match.
Elements
Hover one to find it on the stage. Click it, or put your cursor inside its CSS rule, to focus on just that element.
stage 420px
stage 700px
target content boxtarget outer edge (green = matched, red = not yet)your element (hovered or focused)
Feedback updates as you type, and your CSS is saved in this browser. Exact target numbers are in the Target panel.