Watch it fall apart on a narrow screen

01 / 05

There is no single screen width

What would the pages you have built so far look like opened on a phone?

A screen in your hand is about 375px. A laptop is around 1200px. The same page gets put in two places that differ by a factor of three.

02 / 05

A fixed width has nowhere to go

A box you wrote width: 600px; on stays 600px on any screen.

That may be about right on a wide screen, but on a narrow one it spills outside. You end up with a page nobody can read without scrolling sideways.

.panel {  width: 600px;}

03 / 05

A percentage follows the screen

Write a width in % and it becomes a proportion of the box outside it. When the outside narrows, the contents narrow too, so nothing spills out.

Even this on its own cuts down the breakage a lot.

.panel {  width: 100%;}

04 / 05

Some things percentages cannot fix

There are things a percentage will not sort out.

three cards side by side go too thin to read on a narrow screen
a big heading gets squashed
the space is so generous there is no room left for the contents

You need a way to apply different CSS only when things are narrow, and that is the next lesson.

05 / 05

First, go and look at the breakage

In the exercises you write a fixed width and a percentage width side by side. Keep an eye on the preview and see how the shape changes.

Have a go.