Responsive Breakpoints Guide: Where to Put Your Media Queries

A breakpoint is the screen width at which your layout changes, usually through a CSS media query. Pick them well and your site flows gracefully from a phone to a wide monitor. Pick them badly and you get cramped columns, awkward gaps, and content that breaks at exactly the size your visitors use most.

This guide gives you a sensible set of breakpoints, explains why mobile first is the right default, and shows how modern CSS lets you avoid many media queries entirely. It pairs naturally with the Viewport Meta Generator →, which sets the viewport tag that makes any of this work on real phones.

Start with the viewport tag

Before a single media query matters, your page needs the viewport meta tag. Without it, mobile browsers render your page at a fake desktop width and then shrink it, so your breakpoints never trigger.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

This one line tells the browser to use the real device width. If your responsive CSS seems to do nothing on a phone, this missing tag is the first thing to check.

A practical set of breakpoints

There is no official list, but a handful of widths cover the vast majority of devices. These are a reliable starting point.

For reference, common modern phone widths land around 360, 375, 390, 414, and 430 pixels, which is why a small breakpoint near 480 catches the largest phones before a tablet layout kicks in.

Why mobile first

Mobile first means you write your base styles for the smallest screen and then use min-width media queries to add complexity as the screen grows. This is the opposite of starting with a desktop layout and stripping it down.

/* Base: phone layout, single column */
.grid { display: grid; gap: 1rem; }

/* Tablet and up: two columns */
@media (min-width: 768px) {
  .grid { grid-template-columns: 1fr 1fr; }
}

/* Desktop and up: three columns */
@media (min-width: 1200px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
}

Mobile first wins for two reasons. The base styles are the simplest, so the most constrained device does the least work. And adding complexity as space appears is easier to reason about than removing it as space disappears.

Let CSS do the work without breakpoints

The best media query is often the one you never write. Modern layout tools adapt on their own, which means fewer breakpoints to maintain.

Flexible grids with auto fit

This single rule creates a responsive card grid that needs no media queries at all. The columns wrap automatically based on available space.

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

Each card stays at least 250 pixels wide and the grid fits as many as will comfortably sit on a row, reflowing on its own as the screen changes.

Fluid type with clamp

Instead of stepping font size at each breakpoint, let it scale smoothly:

h1 { font-size: clamp(1.75rem, 5vw, 3rem); }

Container queries

Media queries respond to the whole viewport, but a component does not always know how much room it has. Container queries let an element respond to the size of its own container instead, which is exactly what you want for a reusable card that might sit in a narrow sidebar on one page and a wide main column on another. They are the natural next step once you find yourself fighting viewport based breakpoints for individual components.

Test in both orientations

A layout that looks right in portrait can fall apart in landscape, where width grows but height shrinks. Rotate your test device, or resize the browser to a short wide window, and check that a full height hero does not push your real content off screen. Heights set in vh are the usual offender here, so reserve viewport height units for sections that genuinely should fill the screen.

Common mistakes

Too many breakpoints. Four well chosen widths beat nine fiddly ones. Every extra breakpoint is another place for bugs to hide.

Breakpoints based on devices, not content. Targeting the width of last year's flagship phone ages badly. Target where your layout breaks.

Forgetting the viewport tag. The single most common reason responsive CSS appears to do nothing on a phone.

Desktop first by habit. Starting wide and stripping down usually produces more code and more edge cases than building up.

Related reading

The viewport tag is covered in depth in the meta tags guide, and mobile friendliness is part of the SEO audit checklist.

Bottom line

Use a small set of content driven breakpoints near 480, 768, 1024, and 1200 pixels, write them mobile first with min-width, and lean on auto fit grids and clamp so you need fewer of them. Start by generating a correct viewport tag with the Viewport Meta Generator →, and your responsive layout has a solid foundation.