Lesson 9: Responsive basics

What you'll learn

• Use max-width to keep things readable
• Write a simple media query
• Stack columns on small screens

Explain like I'm 10

When the screen gets small, we stack things so they fit.

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

What responsive means

Responsive design adapts layout and typography so content is usable and readable on phones, tablets, and desktops. It avoids fixed sizes that break on small screens.

Fluid layouts: max-width, percentages, clamp()

Use max-width and percentage widths instead of fixed pixels. clamp() can set responsive font sizes (optional).

.container { max-width: 900px; margin: 0 auto; width: 90%; }

/* optional responsive font */
h1 { font-size: clamp(1.25rem, 2vw, 2rem); }

Media query breakpoint (one example)

Choose a breakpoint based on where your layout breaks (not device names). Here's a common pattern: stack columns below 700px.

@media (max-width: 700px) {
  /* small-screen rules here */
}

Two-column layout that stacks at 700px

<div class="columns">
  <div class="col">Left</div>
  <div class="col">Right</div>
</div>

.columns { display: flex; gap: 16px; }
.col { flex: 1; }

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

Responsive images & readable typography

Make images scale with max-width:100%. Use line-height and max-width on text blocks for readability.

img { max-width: 100%; height: auto; display: block; }
.content { max-width: 65ch; margin: 0 auto; line-height: 1.6; }

Common mistakes & fixes

• Missing viewport meta: Ensure <meta name="viewport" content="width=device-width, initial-scale=1"> is present (it is in this lesson template).
• Fixed widths: Avoid fixed pixel widths on containers or images—use percentages or max-width.
• Breakpoint choice: Pick breakpoints where content needs to change, not strictly device widths.

Practice tasks

1. Build the two-column layout above and test by resizing the browser.
2. Use max-width and margin:0 auto for readable content blocks.
3. Make images responsive with max-width:100%.

Mini challenge

Create a hero section with a two-column layout that stacks at 700px and uses clamp() for the hero font size.

Mini challenge

• Make the hero text larger on big screens.
• Change the background color on small screens.