Intermediate
Rewrite a grid mobile first
This card grid is written desktop first: three columns, undone by a max-width query. Rewrite it mobile first:
- by default (no media query), .cards has one column;
- from 40rem (640px) wide, two columns;
- from 64rem (1024px) wide, three columns.
Use only min-width (or width >=) queries; no max-width.
What Check tests
- The base rule (outside any media query) gives one column
- A min-width query around 40rem makes two columns
- A min-width query around 64rem makes three columns
- No max-width queries are used
- The narrow preview shows one column
Stuck? One hint at a time
The solution unlocks after your first Check. Try first: that is where the learning happens.
Runs in your browser. Your code is saved here.
Your page
Press Run to see the page.
Console
Nothing logged yet.