Command Palette

Search for a command to run...

Hectal
Phase 9Intermediate10 of 12 in CSS

Responsive Design

Build pages that work on every screen: mobile first, the viewport meta, media queries, user preferences, fluid type, responsive media, container queries and logical properties.

People open your page on a 360px phone, a tablet turned sideways, a 1440px laptop and a 4K monitor, with the text zoomed to 200%, in dark mode, or reading Arabic from right to left. Responsive design means one HTML page and one stylesheet that adapt to all of them, instead of a separate "mobile site".

This phase starts with the principles (mobile first, fluid layouts and the viewport <meta> tag), then gives you the tools: media queries for the screen, user preference queries for dark mode, reduced motion and touch screens, clamp() for type and spacing that grow smoothly, CSS for images and video that never overflow, container queries for components that adapt to the space they're given, and logical properties so the same CSS works in left-to-right and right-to-left languages.

It builds on Phase 3 (viewport units, clamp()), Phase 5 (sizing, aspect-ratio), Phase 7 (Flexbox) and Phase 8 (Grid). Every example is live; the preview pane is narrow, so where an example depends on screen width, widen your browser window or open the full-screen editor to watch it change.

0/7 · 0%
7 topics ~3 h 26 code blocks & diagrams
Start with the first topic
1
9.1

Responsive Design Principles

Responsive design means one page whose layout adapts to any screen: start with the small-screen layout (mobile first), size things fluidly instead of in fixed pixels, and add the viewport meta tag so phones show the page at its real width.

28 min 4 code practice

2
9.2

Media Queries

A media query wraps rules in a condition about the device, such as @media (min-width: 40rem) { ... }, so they apply only when it's true; you can test width ranges with min-/max- or the newer range syntax, test orientation, and combine tests with and, commas and not.

27 min 4 code practice

3
9.3

User Preference Queries

Media queries can also ask about the person and their device: prefers-color-scheme (light or dark), prefers-reduced-motion, prefers-contrast, and hover/pointer (mouse or touch), so your page respects settings people have already chosen in their operating system.

28 min 4 code practice

4
9.4

Fluid Typography and Spacing

Fluid type grows smoothly with the screen instead of jumping at breakpoints: font-size: clamp(1rem, 0.5rem + 2vw, 2rem) never goes below the minimum or above the maximum, and in between it scales with the viewport; the same idea gives fluid spacing and a whole type scale.

27 min 4 code practice

5
9.5

Responsive Images and Media in CSS

Images and video are fixed-size by nature, so responsive pages tame them with CSS: max-width: 100%; height: auto stops overflow while keeping the shape, aspect-ratio reserves the right space, and object-fit/object-position decide how a picture fills a box of a different shape.

27 min 4 code practice

6
9.6

Container Queries

Container queries let a component respond to the size of its own container instead of the whole window: mark an ancestor with container-type: inline-size, then write @container (min-width: 400px) { ... }, and size things with container units like cqi.

27 min 3 code practice

7
9.7

Logical Properties

Logical properties describe sides by the direction of the text instead of the screen: margin-inline-start means "where lines begin", which is the left in English and the right in Arabic or Hebrew, so one stylesheet works in every language and writing mode.

26 min 3 code practice

Practise this phase

Hands-on exercises: write the code, see your page live, and press Check to have it tested automatically.

1

Make a page mobile-ready

This page was built for a desktop. On a phone it would be shrunk to a tiny desktop view, and its 800px banner image makes the page scroll sideways.

Beginner
2

Rewrite a grid mobile first

This card grid is written desktop first: three columns, undone by a max-width query. Rewrite it mobile first:

Intermediate
3

Respect dark mode and reduced motion

This notice uses colour variables and a spinning loader. Make it respect the user's settings:

Intermediate
4

A fluid heading with clamp()

Make the h1 fluid: 28px (1.75rem) on small screens, growing smoothly with the viewport width, and never more than 48px (3rem).

Intermediate
5

Make a card work right to left

The same quote card appears twice, once in English and once in Arabic (dir="rtl"). It uses physical properties, so the Arabic card has its accent border, padding, text alignment and "new" badge on the wrong side.

Intermediate
6

Build a container-aware product card

Build a product card that adapts to the space it's given, not the window:

Intermediate