“What px should my breakpoints be?”—the short answer is 768px and 1024px, and that’s it to start with. Adding more only multiplies what you have to check; it doesn’t make the design better. This article covers the values people actually use, and how to keep from adding too many.
CSSMake it look good on phones too: media queriesTo learn how media queries work in the first place, start with this lesson of the CSS courseStart with these two
/* the phone layout lives here, in plain CSS */
.cards {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
/* 768px and up: tablets and small laptops */
@media (min-width: 768px) {
.cards {
grid-template-columns: 1fr 1fr;
}
}
/* 1024px and up: desktop */
@media (min-width: 1024px) {
.cards {
grid-template-columns: 1fr 1fr 1fr;
}
}Plain CSS is the phone layout; media queries override for wider screens. That approach is called mobile-first.
The breakpoints people actually use
There’s no single correct number, but the values you see in practice are fairly settled.
| Value | The width it has in mind | What it’s usually called |
|---|---|---|
| 480px | A large phone (landscape, say) | Phone |
| 768px | Tablet portrait, a small laptop | Tablet |
| 1024px | Laptops, tablet landscape | Desktop |
| 1280px | Desktop displays | Large |
| 1536px | High-resolution large displays | Extra large |
The two in bold are the dividing lines that come up most. The well-known CSS frameworks land around these numbers too.
Common device widths
As a reference for testing, here are typical widths (the width CSS sees, which is not the same number as the hardware resolution).
| Kind | Typical width |
|---|---|
| Smaller phones | 360–390px |
| Larger phones | 390–430px |
| Tablet (portrait) | 768–834px |
| Tablet (landscape), small laptop | 1024–1180px |
| Laptops | 1280–1512px |
| External displays | 1920px and up |
Checking three widths—375px, 768px and 1280px—covers nearly everything in practice.
Why min-width
You can build the same look with max-width (conditioning on narrow screens), but min-width is easier to maintain.
min-width (mobile-first) | max-width (desktop-first) | |
|---|---|---|
| What plain CSS holds | The phone layout | The desktop layout |
| Direction of overrides | Narrow → wide | Wide → narrow |
| Piled-up declarations | Fewer | More likely |
| What a phone loads | Skips the extra rules | Loads the desktop rules too |
The real benefit is fewer overlapping declarations. A phone shows fewer elements, so its rules stay simple, and you add only what wider screens need.
Where to put your media queries
There are two schools on placement.
/* School 1: all together at the end of the file */
.card { ... }
.header { ... }
@media (min-width: 768px) {
.card { ... }
.header { ... }
}/* School 2: right there, per component */
.card {
padding: 12px;
}
@media (min-width: 768px) {
.card {
padding: 24px;
}
}
.header { ... }For beginners, school 2. Everything about one component sits in one place, so you never hunt for “where is this card’s padding decided?” Collect them all at the end of the file and the correspondence becomes untraceable as components multiply.
Without the viewport meta tag, none of it works
This is the most common stumble by far. Without this line in your <head>, a phone renders the page as “a desktop screen about 980px wide” and then scales it down. In other words your media query conditions never match, and the phone shows the desktop layout.
<meta name="viewport" content="width=device-width, initial-scale=1">“It switches in the desktop DevTools but not on my actual phone”—look here first.
HTMLGet the contents of head in orderWhat head and meta tags are for, in the HTML courseWays to skip breakpoints entirely
There are more situations than you’d think where you can be responsive without creating steps. If you can avoid a media query, that’s the easiest thing to maintain.
Let the column count change itself
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 16px;
}“One card is at least 240px, fit as many as you can”—so the browser picks the column count.
TipsCSS Grid cheatsheetHow to read that line in detail, in the CSS Grid cheatsheetScale text smoothly
h1 {
font-size: clamp(1.5rem, 5vw, 3rem);
}clamp() takes three things: a minimum, a value that flexes, and a maximum. Here that’s “at least 24px, 5% of the screen width, at most 48px”—continuous, not stepped. For heading sizes this is usually all you need.
Let a row wrap on its own
.row {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.row > * {
flex: 1 1 240px; /* wraps once it would go under 240px */
}Only cap the width
.container {
width: 100%;
max-width: 1100px;
margin-inline: auto;
padding-inline: 16px;
}Capping with max-width rather than setting width means it shrinks by itself on narrow screens. For many sites this alone makes most of the page responsive.
How to find the width that breaks
Breakpoints are better decided at the width that broke than at a desk.
- Open DevTools and turn on the device toolbar (
⌘ + ⇧ + M/Ctrl + Shift + M) - Drag the width slowly narrower
- Note the width where text overflows, elements overlap, or a horizontal scrollbar appears
- Make your breakpoint just above that width
A breakpoint added this way always has a reason. One added because “768px is the standard” makes no sense to you six months later.
TipsGetting started with developer toolsHow to use the device toolbar, in the DevTools introChecklist when they aren’t working
- No change on a real phone → check the
viewportmeta tag (the prime suspect) - Nothing happens at all → check the space after
@media, and the brackets and colon in(min-width: 768px) - The desktop rules won’t go away → are
min-widthandmax-widthmixed together? - The condition matches but nothing overrides → if your plain CSS uses a more specific selector (
.card p span), the media query loses. Match the selector strength - A horizontal scrollbar appears → before hiding it with
overflow, find the element sticking out.width: 100vwand fixed px widths are the usual culprits - Images burst out of their box → give them
max-width: 100%. It’s the foundation of responsive work
Summary
- Start with 768px and 1024px. Add one only when you find a width that breaks
- Write mobile-first with
min-width, and don’t mix inmax-width - Without the
viewportmeta tag, media queries do nothing on a phone repeat(auto-fit, minmax()),clamp()andmax-widthlet you skip steps entirely in many cases- Don’t pick breakpoints at a desk—drag the width and use where it broke
Fewer breakpoints is better. Build with two, then add only where you actually hit trouble.