Finish the details at phone width

01 / 05

Stacking is not the end of it

Look at your single-column page at 375px. The arrangement is right, but there are still things that nag.

the space above and below the bands is too generous
the text is stuck to the edge of the screen
the centred heading looks adrift

Finishing is a build-up of small things like these.

02 / 05

Take the space off the top and bottom

What eats the most room on a narrow screen is the space above and below a band. Halve the 48px you had for wide screens.

On the other hand, keep the space at the sides. Take it to 0 and the text sticks to the rim of the screen and becomes very hard to read.

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

03 / 05

Put the alignment back to the left

Centring is decoration for when there is width to spare. On a narrow screen the place a line starts moves every time it wraps, and it gets harder to read.

Back at the left there is a single line down the page and the eye does not lose its place.

@media (max-width: 480px) {  .inner h2 {    text-align: left;  }}

04 / 05

Thin lines, wider gaps

The last of the finishing is the dividing. A thick line takes the lead when there is not much width, so you thin it.

Widen the gaps between the cards in exchange, and the dividing is carried by space rather than by lines. On a narrow screen that reads more lightly.

@media (max-width: 480px) {  .card {    border-bottom: 1px solid #cdd8c8;  }}

05 / 05

Finish it and be done

Judged at 375px wide. The base, the switching in stages and the finishing all come together on one page.

Have a go.