Responsive Design

Most visitors to your site will be on a phone. Responsive design means one page that adapts to every screen: a single column on a phone, more columns on a laptop. Today you'll learn the tools.

Step 1: the viewport tag

Every responsive page needs this in its <head>:

<meta name="viewport" content="width=device-width, initial-scale=1">

Without it, phones pretend to be a 980px-wide desktop and shrink the whole page down until the text is tiny. With it, the page is laid out for the phone's real width. (The previews in this course add it for you.)

Step 2: fluid by default

Flexible units let layouts adapt without any special rules:

Switch between Phone, Tablet and Desktop above the preview. No media queries yet, and it already works at every width:

• max-width instead of width for containers.
• img { max-width: 100%; height: auto; } for images.
• clamp(min, preferred, max) for sizes that scale within limits.

Step 3: media queries

A media query applies CSS only when a condition is true, usually the window width:

Switch widths: one column on a phone, two on a tablet, three on a desktop.

Mobile-first

The base CSS (outside any media query) is for phones. Each min-width query adds to it for bigger screens. Starting small keeps the CSS simpler: phones get the plain one-column layout, and you add columns as space appears.

Breakpoints come from your content. Don't chase device sizes; make the window narrower and add a breakpoint where the layout starts to look wrong.

A responsive page layout

Yesterday's grid-areas layout, now mobile-first:

On a phone the areas stack (with the main content before the sidebar); from 700px they sit side by side.

A navbar that adapts

On phones the links wrap below the logo; on wider screens they sit on the right. (A "hamburger" menu that opens and closes needs a little JavaScript, a topic for the JavaScript course.)

Testing

• Use the width buttons on these previews.
• On a computer, open DevTools → device toolbar (Ctrl+Shift+M / Cmd+Shift+M) to try phone sizes, or just drag your browser window narrower.
• Check on a real phone: tap targets should be at least about 44×44px, and text at least 16px.

Recap

• Always include the viewport meta tag.
• Be fluid: max-width, %, img { max-width: 100% }, clamp().
• Media queries: @media (min-width: 600px) { … }.
• Mobile-first: base styles for phones, min-width queries add for bigger screens.
• Breakpoints come from your content, not from device lists.

Tomorrow: positioning, transitions and making pages work for everyone.