Write CSS that only works when it is narrow

01 / 06

An ordinary rule cannot pick a width

Write .card { padding: 24px; } and it is 24px on any screen at all.

You want to say two things at once: 24px when there is room, 10px when there is not. The way to do that is what this lesson is about.

02 / 06

Wrap it in @media

Wrap a CSS rule in @media (...) and it becomes a rule that is only read when the condition holds.

Inside the wrapper you write exactly what you always write. The whole thing just goes one level deeper.

@media (max-width: 700px) {  .card {    padding: 10px;  }}

03 / 06

max-width means "that wide or less"

max-width: 700px is the condition "when the screen is 700px or less". Exactly 700px counts too.

A phone (about 375px) and a tablet (about 600px) both match. On a 1200px screen the inside of the wrapper is not read at all.

@media (max-width: 700px) {  .lead {    color: #d9822b;  }}

04 / 06

Put the wrapper near the bottom

When two rules of the same strength collide, the later one wins. You learned that before.

So put your @media wrappers at the very bottom of the CSS, after all the ordinary rules. Up at the top they lose to the ordinary rules below and nothing happens at all.

.card {  padding: 24px;}@media (max-width: 700px) {  .card {    padding: 10px;  }}

05 / 06

The line between is called a breakpoint

A dividing line like 700px is called a breakpoint.

Choosing one is easy. Narrow the preview bit by bit and take the width where the shape starts to break as your line. You are not matching a model of phone, you are matching where it breaks.

06 / 06

Have a go

In the exercises you write CSS where the colours and the space change only when things are narrow. Some are judged at a narrow width and some at a wide one, so read the question carefully.

Have a go.