Stack them at phone width

01 / 05

There is a width where even two columns are too thin

You went to two columns at the middle width. But what about a 375px screen? Each card is only about 160px.

Headings wrap onto two lines, dates get cut off, and there is not much for a finger to hit. This is the step where you go to one column.

02 / 05

Add a @media (max-width: 480px) wrapper below the tablet one.

375px matches both conditions, so the phone one written later wins. Adding a wrapper below at each step down is the pattern.

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

03 / 05

Going to one column is these two lines. display: block; gives each one a line to itself, and width: 100%; spreads it across the container.

You wrote box-sizing: border-box; in the base, so 100% fits exactly even with space on it.

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

04 / 05

Side by side, the gaps were at the sides. Stacked, what you need is a gap underneath.

Open the bottom only, with something like margin: 0 0 12px;. Notice that the direction changes and the restacked page suddenly looks right.

.card {  margin: 0 0 12px;}

05 / 05

This lesson is judged at 375px wide. The cards come one under another.

Have a go.