Switch the arrangement by width

01 / 05

Make a bigger change than colour

@media is not only good for colours and space. It can change the arrangement as well.

"Three across when there is room, one at a time down the page when there is not" — get that working and a page starts to feel like it belongs on a phone.

02 / 05

A row is inline-block plus percentage widths

You built rows before. display: inline-block; makes them behave like text, then you set the widths as percentages.

For three across, about 30% each. You do not go to exactly 33%, because of the gaps.

.card {  display: inline-block;  width: 30%;}

03 / 05

When narrow, go back to block

Go back to display: block; and each element takes a line to itself. They stop lining up and stack from the top down.

Add width: 100%; and you have a single column as wide as the box outside. Those two lines are all "stack them" amounts to.

@media (max-width: 700px) {  .card {    display: block;    width: 100%;  }}

04 / 05

Only change the lines about arrangement

Inside the wrapper you write two lines, display and width. Colour, space and text size stay as the rule above left them.

The less you rewrite, the fewer mistakes when you come to fix things. Think of it as "write only the difference for when it is narrow".

05 / 05

Have a go at switching the arrangement

In the exercises you line things up at a wide width and then restack at a narrow one. Some are judged wide and some narrow, so check which shape you are being asked for.

Have a go.