Breakpoints

Learn common breakpoint values and selection criteria.

What is a breakpoint?

A breakpoint is a screen width where styles change. When you write @media (min-width: 768px), 768px is a breakpoint: styles change at that width.

Common breakpoints often follow device classes: ~576px (phone), ~768px (tablet), ~1024px (small desktop), ~1280px (wide desktop). They can shift based on your content, though.

The mobile-first approach

Mobile-first means writing base styles for phones first, then adding new @media blocks with min-width for wider screens.

The upside: phone styles stay minimal, and you add more as the screen widens. CSS typically uses min-width.

body { font-size: 16px; }
@media (min-width: 768px) {
  body { font-size: 18px; }
}

The desktop-first approach

Desktop-first is the reverse: you write styles for desktops first, then add new @media blocks with max-width for narrower screens. Desktop styles are the base; phone styles are layered on top.

This approach was common in older code. It is not recommended today; phone traffic is now the majority, and starting with minimal phone styles is more efficient. Writing mobile-first prioritizes the phone.

Exercise Mobile-first: two columns above 768px

Turn the .cards container — single column on phones — into two columns at 768px and above. Add an @media (min-width: 768px) block with a .cards selector and a grid-template-columns: 1fr 1fr declaration.

Show example solution

.cards {
  display: grid;
  grid-template-columns: 1fr;
}

/* Two columns at 768px and above */
@media (min-width: 768px) {
  .cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

Test yourself

Which is a common tablet breakpoint?
- 768px
- 120px
- 4000px
- 12px
Show answer

768px — Correct. 768px is a common tablet breakpoint; many frameworks use this value.

Complete the mobile-first @media block

body { font-size: 16px; }
@media (____: 768px) {
  body { font-size: 18px; }
}

Show answer

body { font-size: 16px; }
@media (min-width: 768px) {
  body { font-size: 18px; }
}

Match the approaches

Mobile-first

min-width
Desktop-first

max-width
Mobile-first advantage

Minimal phone styles
Desktop-first advantage

Legacy code compatibility

Next lesson: Responsive typography

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies