Goal

You’ll be able to write a media query that changes a layout at a specific screen width, understand why the breakpoint value you choose actually matters more than the syntax itself, and know how to test your breakpoints properly rather than guessing.

Learn

A media query lets you apply CSS rules only when certain conditions are true, most commonly screen width:

@media (max-width: 768px) {
  .navbar { flex-direction: column; }
}

This rule only applies when the viewport is 768px wide or narrower, letting you redesign a layout for smaller screens without affecting larger ones at all. Outside a media query, CSS applies unconditionally, regardless of screen size; media queries are the mechanism that makes CSS conditional on the actual viewport.

You can combine conditions too — for example, targeting a specific range between two breakpoints:

@media (min-width: 600px) and (max-width: 900px) {
  .card { width: 50%; }
}

This rule applies only between 600px and 900px, letting you define an intermediate “tablet” treatment distinct from both your mobile and desktop styles.

Decision Task

You have a 3-column grid gallery that looks cramped on a phone screen. Before reading on: would you use max-width or min-width to target phone-sized screens specifically, and roughly what pixel value is a common phone-width breakpoint?

Reveal the Answer

max-width — since you want the rule to apply at phone-sized screens and below, not above. A commonly used breakpoint for phones is somewhere around 480px to 600px, though the exact “correct” number genuinely depends on your specific design’s content, not a single universal rule every project must follow identically.

Common Mistake

Picking breakpoints based on specific device models (like “iPhone 12 width” or “iPad width”) rather than the actual point where your specific design starts to look broken. Devices change constantly, screen sizes proliferate every year, and a breakpoint tied to one specific device becomes meaningless the moment a new device with a different width becomes popular. The real signal is watching your own layout as you resize the browser and finding the point where it genuinely needs to adjust, then setting the breakpoint there, based on your content, not a device name.

Practice Questions

1. Write a media query that applies a rule only when the screen is 1200px wide or wider.

Show Answer

@media (min-width: 1200px) { }

2. Write a media query targeting a range specifically between 480px and 768px.

Show Answer

@media (min-width: 480px) and (max-width: 768px) { }

3. Explain why tying a breakpoint to a specific device’s screen width (like “iPhone 14 width”) is a fragile long-term choice.

Show Answer

New devices with different screen widths appear constantly, so a breakpoint tied to one specific device becomes outdated or irrelevant as soon as that device is no longer representative of common screen sizes.

4. True or False: media queries can only check screen width, not any other condition.

Show Answer

False — media queries can check other conditions too, like orientation or print vs. screen, though width is the most common in responsive design.

5. You’re deciding where to set a breakpoint for a 3-column gallery that starts looking cramped somewhere around 700px. What’s the recommended process from this lesson for finding the exact right number, rather than guessing?

Show Answer

Manually resize the browser window slowly and watch exactly where the layout starts to genuinely look broken or cramped, then set the breakpoint at that specific point, based on the design’s own behavior rather than a predetermined number.

Try It Yourself

You want a rule to apply only on larger, desktop-sized screens, starting from 1024px and up. Would you use max-width or min-width this time?

Show Answer

min-width: 1024px — the rule should apply at that width and above, which is exactly what min-width means.

Quick Check

1. What does max-width: 768px inside a media query mean?

Show Answer

The rule applies when the screen is 768px wide or narrower.

2. What’s a better basis for choosing a breakpoint than a specific device’s screen size?

Show Answer

The point where your own actual design starts to look broken.

3. Which keyword targets larger screens and up: min-width or max-width?

Show Answer

min-width.

4. You want a rule to apply only on larger, desktop-sized screens, starting from 1024px and up. Would you use max-width or min-width this time?

Show Answer

min-width: 1024px — the rule should apply at that width and above, which is exactly what min-width means.

5. You have a 3-column grid gallery that looks cramped on a phone screen. Before reading on: would you use max-width or min-width to target phone-sized screens specifically, and roughly what pixel value is a common phone-width breakpoint?

Show Answer

max-width — since you want the rule to apply at phone-sized screens and below, not above. A commonly used breakpoint for phones is somewhere around 480px to 600px, though the exact “correct” number genuinely depends on your specific design’s content, not a single universal rule every project must follow identically.