Mobile-first approach

CSS course · Intermediate · Lesson 52/98

Learn the mobile-first CSS writing method.

Mobile-first approach

The mobile-first approach means writing small screen styles first, then adding larger screen styles with @media (min-width: ...) blocks. Because CSS is read top to bottom, the last declaration wins; min-width conditions apply only when the viewport is wide enough.

So small devices load only the small amount of CSS written for them; large screens pull in the extra styles when needed. This gives a clean base for both performance and maintenance.

How does min-width work?

The @media (min-width: 768px) block applies only when the viewport is 768 pixels or wider. Base styles always run; declarations inside the media query layer on top only when the condition is met.

That's why writing small screen styles first and adding wider-screen blocks below gives a natural progressive layout.

Common breakpoint values

Common breakpoints in a mobile-first layout are: 576px for small phones, 768px for tablets, 992px for desktops, 1200px for wide desktops. These are not fixed; you can shift them to fit the design.

The key is to break on the width where the content starts to break, not on device classes. That's why some teams prefer values like 640px or 960px.

Exercise Increase .card padding for tablets

Below the mobile base style, add an @media (min-width: 768px) block for screens 768 pixels and wider. Inside it, set the .card padding to 2rem.

Show example solution

@media (min-width: 768px) {
  .card {
    padding: 2rem;
  }
}

Test yourself

Which media query type is used in the mobile-first approach?
```
/* Base styles (mobile) */
.card { padding: 1rem; }

/* ? */
@media (____: 768px) {
  .card { padding: 2rem; }
}
```
- Only max-width
- Starting with min-width
- Only @media print
- Without @media
Show answer

Starting with min-width — Correct. A min-width query layers on top of the base styles when the condition is met.

Write the min-width condition for tablets

@media (____: 768px) {
  .card { padding: 2rem; }
}

Show answer

@media (min-width: 768px) {
  .card { padding: 2rem; }
}

Match each breakpoint to its target

@media (min-width: 576px)

Small phone and up
@media (min-width: 768px)

Tablet and up
@media (min-width: 992px)

Desktop and up
@media (min-width: 1200px)

Wide desktop

Mobile-first approach