Change the text size with the width too

01 / 05

You fixed the boxes and the text is still big

You changed the arrangement by width, but leave a heading at 40px and on a phone it wraps onto two lines, or three.

Boxes are not the only thing that moves. Coping with width means thinking about the text size along with them.

02 / 05

All you write inside is font-size

The method is the one you know. Write the everyday size, then override it only when narrow.

There is no new way of writing here; you just put a font-size inside @media.

.title {  font-size: 40px;}@media (max-width: 670px) {  .title {    font-size: 28px;  }}

03 / 05

Write the wide one first

The ordinary rule goes first and the @media goes after. The other way round, the ordinary rule that comes later overrides it and nothing happens.

Get the order wrong and it shows up as "I wrote it and nothing changed". Check the top and bottom of your CSS first.

04 / 05

Do not go too small

Shrinking makes it fit, but body text below 12px is hard work to read. Rough guides:

big heading … 40px down to about 26px
body text … 16px down to about 14px

Take a lot off headings and almost nothing off body text. Keeping the difference is what protects readability.

.lead {  font-size: 18px;}@media (max-width: 670px) {  .lead {    font-size: 15px;  }}

05 / 05

Change the width and compare

Widen and narrow the preview and the text snaps at the dividing line. That line is the number you wrote in @media.

Have a go.