CSS Media Queries

People read your site on phones, tablets, laptops, and huge monitors. A layout that looks great on a desktop can be unusable on a small screen. Media queries fix that. They let you apply extra styles only when the screen matches a condition, like a minimum width.

You write the base styles first, usually for the smallest screens. Then each media query overrides pieces of the layout as the screen grows. A one-column grid becomes two columns at 700 pixels and four at 1100. This approach is called mobile-first, and it is easier to maintain because you build up instead of tearing down.

One detail matters on phones: the viewport meta tag. Without a viewport meta tag in the head, phones pretend the screen is about 980 pixels wide and shrink your page to fit. That defeats every media query you write. If your responsive site works in the browser but not on a real phone, check this tag first.

min-width versus max-width

The condition inside the query is a real question the browser asks: is the viewport at least 700px wide? min-width queries apply above the breakpoint; max-width queries apply below it. Mixing both styles leads to confusing overrides. Pick one direction and stay consistent. Mobile-first means min-width queries that build the layout up as the screen grows.

/* mobile base: one column */
.grid {
  grid-template-columns: 1fr;
}

/* above 700px: two columns */
@media (min-width: 700px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

Picking breakpoints

Breakpoints should follow your content, not a list of devices. A good process: widen the browser until the layout starts to look cramped or stretched, and add a breakpoint exactly there. Phones, tablets, and laptops are useful starting guesses, but the design decides the real numbers. Two or three breakpoints cover the vast majority of sites.

/* breakpoints chosen by content, not by device names */
@media (min-width: 700px) { /* two columns */ }
@media (min-width: 1100px) { /* four columns */ }

The viewport meta tag

Without a viewport meta tag, phones render the page at roughly 980 pixels wide and zoom it out to fit the screen. Your careful media queries never run, because the phone reports a desktop-width viewport. One line in the head fixes it: meta name viewport with content width=device-width. This tag belongs in every page you build.

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

Syntax

@media (min-width: 700px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

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