Responsive Design & Media Queries

A Conditional Block of CSS, Based on the Viewport

A media query wraps a block of CSS rules in a condition — most commonly the browser's current viewport width — so those rules only apply when the condition is true. This is the core mechanism behind every layout that visibly rearranges itself when you resize a browser window or rotate a phone.

.sidebar {
  display: none;   /* hidden by default, on small screens */
}

@media (min-width: 768px) {
  .sidebar {
    display: block;   /* shown once the viewport is at least 768px wide */
  }
}

Two Genuinely Different Strategies, Not Interchangeable Syntax

min-width queries apply their rules once the viewport reaches AT LEAST that width — the natural building block for a mobile-first approach (covered in full in the next module), where base styles target small screens and each query progressively adds more as space becomes available. max-width queries apply once the viewport is AT MOST that width — the natural building block for a desktop-first approach, starting from a full layout and stripping things away as space shrinks.

/* Mobile-first: base styles are for small screens, min-width ADDS complexity */
.nav { display: block; }               /* stacked links, small screens */
@media (min-width: 768px) {
  .nav { display: flex; }               /* horizontal nav, larger screens */
}

/* Desktop-first: base styles are for large screens, max-width REMOVES/overrides */
.nav { display: flex; }                 /* horizontal nav, default */
@media (max-width: 767px) {
  .nav { display: block; }              /* stacked links, small screens */
}

Why There Is No Single Universal Breakpoint Standard

/* These are common CONVENTIONS, not a spec or hard rule */
@media (min-width: 480px)  { /* larger phones */ }
@media (min-width: 768px)  { /* tablets */ }
@media (min-width: 1024px) { /* small laptops */ }
@media (min-width: 1280px) { /* desktops */ }

These numbers are popular defaults from major CSS frameworks, not values mandated by any specification — device screen sizes are genuinely too varied for any fixed set of breakpoints to be universally correct. The actually correct approach: pick breakpoints based on where your specific layout starts to look cramped or awkward, resizing your own browser window slowly and watching for the point content actually needs to rearrange — not by copying a framework's defaults and assuming they fit your content.

and, or, and Feature Queries

/* AND — both conditions must be true */
@media (min-width: 768px) and (max-width: 1023px) {
  /* applies ONLY in this specific tablet-width range */
}

/* Comma-separated list acts as OR */
@media (max-width: 600px), (orientation: landscape) {
  /* applies if EITHER condition is true */
}

/* Combining a size condition with a feature query */
@media (min-width: 768px) and (hover: hover) {
  /* only on wider screens that ALSO support real hover
     (excludes touch-only tablets pretending to be desktop-width) */
}

hover: hover and pointer: fine are genuinely useful feature queries beyond simple width — they detect whether the device has a real mouse-like pointer and true hover capability, letting you avoid hover-dependent interactions on a touch device regardless of its screen width.

Building on the Colors, Units & Typography Module

Media queries decide WHEN styles change; relative units (covered in full in the Colors, Units & Typography module) decide how naturally a layout flexes BETWEEN those breakpoints. Combining both is what produces a layout that feels smooth rather than snapping abruptly.

.container {
  width: 90%;              /* percentage — scales continuously with the viewport */
  max-width: 1200px;       /* caps growth on very large screens */
  padding: clamp(16px, 4vw, 48px);  /* scales smoothly between a min and max */
}

clamp(min, preferred, max) is a genuinely powerful modern tool here — it lets a value scale fluidly with the viewport (the vw unit in the middle argument) while guaranteeing it never goes below the minimum or above the maximum, often eliminating the need for a media query entirely for values like padding or font-size that just need to scale smoothly rather than change abruptly.

DevTools' Device Toolbar, and Its Real Limits

Every modern browser's DevTools includes a device toolbar that simulates common device viewport sizes — genuinely useful for rapid iteration, but it simulates the viewport dimensions, not the real device's rendering engine, touch behavior, or actual performance characteristics.

A Layout That Broke Specifically at 820px, at a Minneapolis Retail Startup

/* The team's breakpoint, copied from a framework default */
@media (min-width: 768px) {
  .product-layout { display: flex; }
}

/* An iPad in landscape orientation reports a viewport width of 1024px —
   comfortably past 768px, so the flex layout DOES activate — but the
   product description text at that specific width was long enough that
   the two flex columns didn't have enough combined space, causing overlap */

Four Misconceptions About Responsive Design

5 Interview Questions — With Complete Answers

Responsive Design Mistakes Beginners Make Constantly

Issues You Will Hit With Media Queries — And Exactly Why