01 | ONE PAGE, MANY AVAILABLE WIDTHS

Your project gallery looks good on a laptop, but a three-column layout squeezes its cards on a phone. Responsive design lets the same page adapt to the available space.

Responsive design combines flexible sizing, adaptable media and conditional CSS. It is more than shrinking a desktop page.

A narrow viewport may come from a phone, a resized window, split-screen use or browser zoom. Treat width as available space, rather than proof of a particular device.

02 | SET THE VIEWPORT

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

This asks mobile browsers to use the device width for the layout viewport and an initial scale of 1. Without suitable viewport metadata, a mobile browser may use a wider virtual layout and scale it down.

The metadata does not automatically make your CSS responsive. You still need flexible layouts and usable content.

Do not disable user zoom with settings such as user-scalable=no. People may need to enlarge the content.

03 | BEGIN WITH FLEXIBLE BASE STYLES

*, *::before, *::after {
  box-sizing: border-box;
}
.container {
  width: 100%;
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: 16px;
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}

The container can use the available width but has a maximum. border-box keeps its padding inside that width. margin-inline: auto can centre it when spare inline space exists.

The image rule prevents an image from exceeding its container and preserves its proportions. Unlike width: 100%, max-width: 100% does not by itself force a smaller image to expand.

Flexible rules can solve many problems without a breakpoint. Add media queries when the layout needs a meaningful change.

04 | A MEDIA QUERY APPLIES CONDITIONAL RULES

.projects {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}
@media (min-width: 700px) {
  .projects {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media applies the enclosed rules when its condition matches. min-width: 700px includes a viewport width of 700 CSS pixels and anything wider.

The base styles still apply. The query changes the column declaration rather than replacing the entire stylesheet.

The outer curly braces contain ordinary CSS rules. Keep both sets of braces balanced. A query’s declarations still take part in the normal cascade.

05 | MOBILE-FIRST MEANS SIMPLE BASE RULES

.projects {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}
@media (min-width: 700px) {
  .projects {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1000px) {
  .projects {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

Mobile-first CSS starts with a usable narrow layout and adds enhancements as space increases. It does not mean that only phones receive the base styles.

At 1100px, both queries match. These equally specific column declarations use source order, so the later three-column declaration wins.

You can also use max-width queries. If conditions overlap, check their cascade carefully. Do not assume exactly one query will be active.

06 | CHOOSE BREAKPOINTS FROM CONTENT

A breakpoint is a threshold where a conditional style begins to apply. Choose it because the content needs a change, rather than because a familiar device has that width.

1. Start with the narrow layout.
2. Gradually widen the viewport.
3. Find where an extra column or sidebar becomes comfortably usable.
4. Add a query at that threshold.
5. Test just below, at and just above it.

700px and 1000px are teaching examples, not universal recommended values. A gallery with long titles may need different thresholds from a page with short cards.

07 | ADAPT PAGE REGIONS WITHOUT REORDERING MEANING

.page-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "header"
    "main"
    "sidebar"
    "footer";
  gap: 20px;
}
@media (min-width: 850px) {
  .page-layout {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    grid-template-areas:
      "header header"
      "main sidebar"
      "footer footer";
  }
}
.page-header { grid-area: header; }
.page-main { grid-area: main; }
.page-sidebar { grid-area: sidebar; }
.page-footer { grid-area: footer; }

The narrow layout puts the regions in one column. The wider layout puts supplementary content beside the main content. Keep a logical header, main, aside and footer order in HTML.

Do not hide essential information merely to make a small screen look tidy. Visual placement also does not automatically change reading or keyboard order.

08 | KEEP NAVIGATION AND CONTENT USABLE

.main-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.project-card {
  min-width: 0;
  overflow-wrap: anywhere;
}

A wrapping navigation row is a useful beginner solution. If you later create a collapsible menu, it needs an accessible button, understandable state and keyboard support, not just CSS that hides the links.

Keep controls comfortably usable by touch, labels visible and focus indicators clear. Avoid interactions that depend only on hovering.

Wide data tables may need a scrolling wrapper. Preserve the data and headings instead of hiding useful columns. Avoid globally hiding horizontal overflow to conceal a layout problem.

09 | TRY IT: RESIZE AN ISOLATED PAGE

This demo has a real min-width: 600px media query inside its own frame. Change the frame width and inspect its card layout. The query responds to the frame’s viewport, not the width of the outer lesson page.

10 | TEST MORE THAN ONE PHONE WIDTH

• Resize continuously, not just between preset sizes.
• Check breakpoint boundaries.
• Try longer headings, realistic images and extra navigation links.
• Enlarge text or zoom and check for clipping.
• Use Tab and Shift+Tab to review focus order.
• Try a real device where possible, in more than one orientation.

Developer-tool device previews are useful, but they do not replace every real-device check. Test scrolling, touch behaviour and actual content loading.

Responsive design and accessibility overlap. The next lesson develops keyboard focus, contrast and usability in more detail.