5 hands-on exercises and 5 find-the-bug challenges for the Responsive Layout lesson. Every one is checked automatically in the browser — write the code, run it, and the tests tell you what still fails.
Stop .cell growing wider than its container.
Make #grid half the viewport width.
Make #grid fluid but never wider than 300px.
Lay #grid out as a wrapping flex row.
Give .cell a font-size clamped between 14px and 24px, scaling at 2vw.
A hard width cannot shrink; cap it instead.
Three columns should only appear from 700px up.
Ready to write the code?
The editor, the automatic checks and the worked solutions open up with an account.
Open the workspace50vw is half the viewport, not half the parent.
Capping a fluid width uses min(), which picks the smaller value.
Without wrapping, the items are squeezed instead of flowing onto new lines.