Session 15 — Responsive design

You will make the café site adapt to any screen with three tools: the viewport meta tag, fluid layouts (grid fr, minmax, max-width: 100% images), and media queries — using the mobile-first pattern (min-width) where the narrow stacked layout is the base and wider layouts are upgrades.

Plan: ideas → worked responsive examples → bridge → short drills → reveal.

Time: about 50–60 minutes if you trace both the narrow and wide versions of every layout before reading the reveal.

Session 15 — Responsive design

The one-paragraph story

A page must look right on a phone, a tablet, and a desktop. The foundation is the viewport — a <meta> line that tells mobile browsers to use the real screen width instead of pretending to be a desktop — plus fluid layouts that shrink (grid fr columns, minmax, percentage widths) and media queries that apply different rules at different widths. The standard strategy is mobile-first: build the stacked, narrow-screen layout first, then use min-width queries to upgrade it for wider screens. This session makes the café site adapt: the two-column page collapses to one column on a phone, and the gallery reflows itself.

---

The viewport meta tag

Mobile browsers used to pretend screens were ~980 px wide, shrinking pages to fit — so a "desktop" page looked tiny and unreadable. The fix is one meta line in the head:

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

width=device-width says "use the actual screen width as the layout width"; initial-scale=1.0 sets the starting zoom. Every responsive page carries this line — without it, media queries fire against the wrong (fake desktop) width and nothing works as intended.

---

Fluid layouts first

Before media queries, make layouts flexible so they mostly work at every size:

.page {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
}

fr columns already adapt — the main/aside split scales with the container. The gallery idiom repeat(auto-fill, minmax(200px, 1fr)) (Session 14) reflows columns with no media query at all. Widths in fr/minmax/percentages are fluid; fixed pixel widths are what break on small screens. The habit: design fluid, then add media queries for the places fluid alone cannot handle (two columns that must collapse to one).

---

Media queries

A media query wraps rules that apply only above (or below) a width:

@media (max-width: 700px) {
  .page {
    grid-template-columns: 1fr;   /* one column below 700 px */
  }
}

Read it: "at a max width of 700 px, override .page to a single column." The rules inside are ordinary CSS — they just come with a condition. Two spellings to know:

• max-width — applies at or below the width ("desktop-first": start wide, collapse down).
• min-width — applies at or above the width ("mobile-first": start narrow, upgrade up).

The breakpoint (the chosen width, here 700 px) is where the layout changes. Common breakpoints cluster around small phones (480 px), tablets (768 px), and desktops (1024 px) — but the right breakpoint is wherever your design stops working, not a magic number.

---

Mobile-first: build narrow, upgrade wide

The mobile-first order:

/* Base: the narrow-screen layout (everything stacks) */
.page {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

/* Upgrade at 768 px and wider */
@media (min-width: 768px) {
  .page {
    grid-template-columns: 2fr 1fr;
  }
}

The base styles are the phone layout — one column, everything stacked, easy to read and touch. The min-width: 768px query upgrades to two columns only when there is room. Mobile-first means the base layer is already the accessible default, and media queries only add complexity.

---

Responsive images

Two habits keep images from breaking layouts:

img {
  max-width: 100%;
  height: auto;
}

• max-width: 100% — the image never exceeds its container's width; a wide photo shrinks instead of overflowing.
• height: auto — the height scales with the width, preserving the aspect ratio.

Combined, the rule makes any image safe inside a fluid layout — a key habit for the café gallery on small screens.

---

The café site, responsive

/* Base: stacked, one column — phones */
.page {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

/* Tablets and up: main + aside */
@media (min-width: 768px) {
  .page {
    grid-template-columns: 2fr 1fr;
  }
}

img {
  max-width: 100%;
  height: auto;
}

On a phone: main content then aside, stacked, images capped at the column width. At 768 px and up: the 2:1 two-column layout. Same HTML, same base CSS — the media query is the only difference between the two layouts.

---

Thinking in breakpoints

A practical way to develop: shrink the browser window until the design breaks, then write the breakpoint there. Stretch it back out and verify. Three widths cover most sites; each breakpoint should have a reason — "the aside no longer fits beside the main at 700 px" — rather than being picked at random.

---

Pitfalls to watch for

• Missing viewport meta — media queries misbehave on phones because the browser uses the fake desktop width.
• Fixed pixel widths — a width: 980px container overflows every phone; use fluid units.
• Forgetting to reset the base — a mobile-first query set new columns; the base must already be the stacked version.
• Images without max-width: 100% — wide photos push the layout sideways on small screens.

Session 15 — Worked examples

Example A — The viewport line in context

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Harbor Café</title>
  <link rel="stylesheet" href="styles.css">
</head>

The viewport meta sits in the head beside charset and title. Without it, a phone renders the page as if the screen were ~980 px wide — tiny text, media queries keyed to the wrong width.

---

Example B — The two-column page collapses on phones

.page {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 768px) {
  .page {
    grid-template-columns: 2fr 1fr;
  }
}

Walk both layouts:

• Below 768 px (phone): the base rule applies — one column. main stacks above aside, full width each. Easy to read and scroll.
• At 768 px and above (tablet/desktop): the media query overrides the columns — 2fr 1fr, main beside aside.

The min-width spelling makes this mobile-first: base is narrow, the query upgrades wide.

---

Example C — Images that never break the layout

img {
  max-width: 100%;
  height: auto;
}

A 1200 px photo inside a 400 px phone column: max-width: 100% caps it at 400 px; height: auto scales the height proportionally. The same image on a 900 px desktop shows at up to 900 px. One rule makes every image layout-safe.

---

Example D — max-width vs min-width

/* Desktop-first: start wide, collapse down */
@media (max-width: 700px) {
  .page { grid-template-columns: 1fr; }
}

/* Mobile-first: start narrow, upgrade up */
@media (min-width: 768px) {
  .page { grid-template-columns: 2fr 1fr; }
}

Both produce a collapsing page, but they read differently. The min-width version has the phone layout as its base layer — nothing to "undo" at small sizes. The max-width version must re-style at every smaller size. Mobile-first (min-width) is the course's recommended order.

---

Example E — A fluid gallery

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

No media query at all — the grid adds a column whenever 200 px of room exists:

• 430 px phone → two columns.
• 900 px tablet → four columns.
• 1400 px desktop → seven columns.

auto-fill + minmax is the responsive gallery idiom: the design adapts to width as a side effect of the sizing rule.

---

Example F — Finding breakpoints by shrinking

The café's .page breaks around 700 px — below that, the 2:1 split leaves the aside too narrow to read. So the breakpoint is 768 px (with a little margin for safety). The nav bar, by contrast, fits on any width, so it needs no breakpoint. Each breakpoint should trace back to a real break in the design.