LESSON 22

Responsive Design

Learning objective: Design pages that work on any screen size.

Understand

Responsive design adapts a layout to the device.

Start with a mobile-friendly base, use relative units, flexible images (max-width: 100%), and the viewport meta tag. The goal is one site that looks right on phones, tablets, and desktops.

Analogy: Responsive design is like water: it takes the shape of whatever container (screen) it is poured into.

See It in Action

Flexible images:

img {
  max-width: 100%;
  height: auto;
}
How it works: Images never overflow their container and keep their proportions as the layout shrinks.

Try It Yourself

  1. Add the viewport meta tag if missing.
  2. Make images max-width: 100%.
  3. Resize the window and check for overflow.

Quick Quiz

What does max-width: 100% on images prevent?

Challenge

Make an existing page free of horizontal scrolling on a narrow screen.

Success condition: Your page has no horizontal overflow when the window is narrow.