Before this lesson

Complete box sizing, Flexbox and Grid, and know how to adjust viewport width.

What you will be able to do

Choose breakpoints from content needs, distinguish layout, touch and text adaptation, and create repeatable checks.

Understand the mechanism

Responsive design is not three separate pages for three phones. It makes layout behave across a continuous width range. Begin with fluid sizing, maximum widths, wrapping and automatic layout, then add a media query when the structure needs to change. Choose the breakpoint where content becomes crowded rather than by a fashionable device name.

A viewport declaration establishes a useful mobile layout viewport but cannot fix a fixed-width card. Consider longer text, translation, enlarged fonts, rotation and input methods. A tiny icon usable with a mouse may be difficult to touch, and a hover-only menu may be inaccessible to keyboard or touch users.

Runnable example

<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
  .layout { display: grid; gap: 24px; }
  img { max-width: 100%; height: auto; }
  @media (min-width: 768px) {
    .layout { grid-template-columns: 2fr 1fr; }
  }
</style>
<div class="layout"><main>Main content</main><aside>Notes</aside></div>

Trace and verify

Put the meta in the head and the layout in the body, then drag continuously from 1280px to 320px. Inspect the content order on both sides of the breakpoint, not just at two endpoints. Substitute longer English text and enlarge fonts to verify that prose, buttons and navigation remain usable.

Common mistakes and boundaries

Avoid hiding all horizontal overflow, which can clip menus and focus indicators. Do not disable user zoom. Large collections of corrective media-query overrides are harder to maintain than flexible base rules. A simulated viewport tests width, not every real-device keyboard or touch behavior.

Practice challenge

Create a test matrix for 320, 375, 768 and 1280px, plus long titles, missing images and keyboard navigation. Define pass conditions.

Reference solution and reasoning

Checks should cover no whole-page horizontal overflow, visible primary actions, unclipped prose, sensible order and visible focus. Independent horizontal scrolling in a code block is acceptable and should not be confused with page overflow. Record dimensions and actual interactions as well as screenshots.

Further reading