Mobile-First CSS

Mobile first is a way of ordering your CSS. The base styles, the ones with no media query, are for the smallest screens. Then you use min-width queries to add changes as the screen gets bigger.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<style>
  /* Base styles: apply to every screen */
  .cards { display: grid; gap: 8px; }
  .card  { background: #d0e8f2; padding: 14px; border: 1px solid #1a5276; }

  /* When there is room, use two columns */
  @media (min-width: 400px) {
    .cards { grid-template-columns: 1fr 1fr; }
  }
</style>
<div class="cards">
  <div class="card">One</div><div class="card">Two</div>
  <div class="card">Three</div><div class="card">Four</div>
</div>

Narrow: one column. Wider than 400px (in this small panel): two columns. On a real page the breakpoint would be around 600 to 768px.

Why start small?

• Phones get the simplest CSS. They do not have to download and then undo desktop styles.
• A single column is easy. Stacked blocks are what HTML already does. You add layout only when there is room for it.
• Your CSS grows in one direction. Each query adds something instead of cancelling earlier rules.

Desktop-first for comparison

1
2
3
4
5
6

/* Desktop first: undo things for small screens */
.cards { display: grid; grid-template-columns: 1fr 1fr 1fr; }

@media (max-width: 767px) {
  .cards { grid-template-columns: 1fr; }
}

This works too, but you write the complex layout first and then cancel it. Over a whole stylesheet it tends to produce more overrides.

A good habit

Design and test at about 360px wide first. If it looks good and reads easily there, widening it is simple.