Start with the middle width

01 / 05

Do not jump straight to a phone

The base is built for a wide screen. Now you work down to phone width, but you do not go in one jump.

Wide, then middling, then narrow: down the steps in order. One step at a time and you can see straight away where it broke.

02 / 05

A tablet held sideways is about 1000px, held upright about 600px. Right in the middle.

In this chapter, "700px or less" is the middle width. Three columns is too thin there, but it is not narrow enough to want one column.

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

03 / 05

That is all you do at the middle width. Widen the cards from 30% to 45% and only two fit on a line, so you get two columns by themselves.

Leave display alone. Kept at inline-block, the cards that do not fit spill onto the next line.

04 / 05

The narrower it gets, the more room big spaces eat. Take a bit off the top and bottom of the bands.

At the middle width you write about two things: the number of columns and the space. The fine finishing comes at a narrower width.

@media (max-width: 700px) {  .events {    padding: 20px 0;  }}

05 / 05

This lesson is judged at 600px wide. Three columns have become two, and it is not one column yet.

Have a go.