Responsive Design With Media Queries

Several earlier lessons mentioned responsive behaviour in passing: flex-wrap reflowing cards, grid's auto-fit changing column counts automatically. Those are responsive techniques that need no extra code. But sometimes you need to change styles deliberately based on the size of the screen, and that is exactly what media queries are for. This lesson is about writing CSS that adapts on purpose, rather than relying only on flexbox or grid to adapt for you.

Writing A Media Query

A media query wraps a block of CSS in a condition, and the styles inside only apply when that condition is true.

.nav {
  display: flex;
  gap: 24px;
}

@media (max-width: 600px) {
  .nav {
    flex-direction: column;
    gap: 8px;
  }
}

max-width: 600px means "apply this when the viewport is 600px wide or narrower." So on a typical phone, the navigation stacks vertically; on a wider screen, the earlier horizontal flex rule applies instead. Notice that the media query comes after the base rule in the file. This matters because of the cascade (covered properly in the next lesson): later rules with equal specificity win, so writing your general, "default" styles first and your overrides inside media queries afterward is the standard, predictable pattern.

Mobile First Versus Desktop First

This points to the most important mindset shift in this lesson: mobile-first versus desktop-first thinking. In a desktop-first approach, you write full desktop styles as the default, then use max-width media queries to simplify things down for smaller screens, as in the example above. The next lesson covers the opposite, mobile-first approach, in depth, but it's worth knowing both exist, because you'll encounter both in real codebases.

Common breakpoints (the widths where your layout changes) are not fixed rules handed down by the CSS language itself; they're conventions based on common device sizes. A frequently used, reasonable starting set is: around 600px for phones, around 768-900px for tablets, and around 1200px for small laptops, though real projects adjust these based on their own design needs rather than following numbers blindly.

.card-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

@media (max-width: 900px) {
  .card-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .card-row {
    grid-template-columns: 1fr;
  }
}

This creates three distinct layouts: three columns on wide screens, two columns on medium screens like tablets, and a single column stacking vertically on phones. Each media query only needs to override the specific property that needs to change; everything else (gap, for instance) is inherited from the base rule since it isn't redeclared.

Combining Media Conditions

You can also combine conditions, and query things other than width, like orientation.

@media (min-width: 600px) and (max-width: 900px) {
  .sidebar {
    display: none;
  }
}

This hides the sidebar only within that specific range, letting it reappear both below and above those widths if other rules apply there, which is a less common but occasionally useful pattern (for example, a tablet-specific adjustment that doesn't apply to phones or desktops).

The Viewport Meta Tag

A very important, often-missed detail: without a proper viewport meta tag in your HTML, media queries will behave strangely on real phones, because the phone's browser may render the page at a zoomed-out desktop width by default. Every responsive page needs this in the HTML head.

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

This tells the phone's browser: use the actual device width as the CSS viewport width, and start at 100% zoom. Without this single line, your carefully written max-width: 600px media query might never even activate correctly on a real phone, which is one of the most common and confusing beginner mistakes in responsive design, precisely because the bug has nothing to do with the CSS itself.

Other Uses For Media Queries

Beyond layout, media queries are also commonly used for simpler adjustments: shrinking a heading's font size on small screens, hiding a decorative image to save space, or adjusting padding so content doesn't feel cramped against the edges of a small screen.

.hero-title {
  font-size: 3rem;
}

@media (max-width: 600px) {
  .hero-title {
    font-size: 1.75rem;
  }
}

Media queries aren't limited to width and orientation. You can also query a user's preferences, such as prefers-color-scheme for dark mode (mentioned again in the variables lesson) or prefers-reduced-motion for users who want less animation (covered in the transitions lesson). Thinking of media queries as a general-purpose "respond to the user's context" tool, not just a screen-width tool, will serve you well as you build more adaptive interfaces.

Practical Tips And Exercise

Practical tip: always test responsive design using your browser's actual device toolbar/responsive mode (usually available in developer tools), not just by manually resizing a desktop browser window, since real phones have specific width and touch behaviours that are easy to misjudge otherwise.

Worth trying right now: take the three-column card row example above, and build it with your own breakpoints for a page introducing Vikesh Singh, Tony Stark, and Iron Man. View it in your browser's device toolbar at a phone width, a tablet width, and a desktop width, and confirm the viewport meta tag is included so the breakpoints behave correctly on an actual phone.