Responsive design: media queries and the mobile-first approach

Parts 10 and 12 already showed how Flexbox and Grid can reflow without media queries at all. This part covers media queries themselves — the real, remaining tool for changes that genuinely aren't just about column count, and the mobile-first discipline that keeps them from accumulating into a mess.

The real syntax

.hero h1 {
  font-size: var(--text-xl);
}

@media (min-width: 768px) {
  .hero h1 {
    font-size: var(--text-2xl);
  }
}

A media query wraps real CSS rules that only apply when its condition is true — (min-width: 768px) here means "apply this only when the viewport is at least 768px wide." Combined with the viewport meta tag from the HTML series' own SEO coverage (without which this entire mechanism is moot on real mobile devices), this is what lets Bright Leaf Coffee's hero heading render smaller on a phone and genuinely larger on a desktop.

Mobile-first: the real, deliberate direction to write in

/* mobile-first: the BASE rule targets the smallest real screen */
.card-row {
  display: flex;
  flex-direction: column;
}

/* then genuinely ADD complexity as screen size increases */
@media (min-width: 768px) {
  .card-row {
    flex-direction: row;
  }
}

Mobile-first means writing the real, unqualified base styles for the smallest screen first, then using min-width media queries to layer on changes as the viewport grows — the opposite direction from writing full desktop styles first and using max-width queries to strip things away for smaller screens.

Real, practical breakpoint values — not arbitrary numbers

:root {
  /* documented here as reference values, not literal custom properties
     — media query conditions can't use var() in most real browsers yet */
}

/* small tablets and large phones */
@media (min-width: 600px) { }

/* tablets */
@media (min-width: 768px) { }

/* small desktops */
@media (min-width: 1024px) { }

/* large desktops */
@media (min-width: 1280px) { }

These four real values are a common, practical starting set — not a rigid law, but genuinely useful defaults roughly matching common real device width ranges. The better real practice, though, is choosing a breakpoint specifically where Bright Leaf Coffee's own content actually starts looking cramped or overly sparse, rather than picking a number because it matches a specific real device's screen width, which becomes an increasingly unreliable target as new device sizes keep appearing.

Other real, useful media features beyond width

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

@media print {
  .site-header, .main-nav, .sidebar {
    display: none;
  }
}

prefers-reduced-motion respects a real, genuine operating-system-level accessibility preference — some visitors experience real discomfort or disorientation from motion, and this media query is how CSS honors that preference directly, a real accessibility consideration this series will return to more fully in part 16's coverage of animation. @media print applies rules specifically when a page is being printed — genuinely useful for hiding real navigation and interactive elements that make no sense on a printed page.

Testing real responsive behavior honestly

A phone-sized browser window on a desktop monitor is a real, useful first check, but it's not a complete substitute for testing on an actual device — real touch target sizes, real font rendering, and real viewport behavior can all differ in ways a resized desktop browser window doesn't fully capture. Worth treating browser dev tools' device emulation as a genuinely fast first pass, not the final, complete verification for a real production site.

Next: styling real forms — Bright Leaf Coffee's actual checkout form, made genuinely usable and accessible through CSS.