Stop 03 · CSS3Topics · 13/17

Responsive Design

In short

Lots of your users will open your site on a phone. Responsive design means one website that fits a small Android, a tablet and a laptop without a separate version for each.

The overall practice of building layouts that adapt gracefully across screen sizes using fluid grids, flexible images and media queries together. Responsive work includes typography, spacing, media, navigation, touch targets, content priority, and interaction behavior—not just making columns stack on smaller screens.

The jaadu mascot pours water from a jug into a short steel tumbler and a tall bottle.

Think of it like this

Water takes the shape of the glass

Pour the same water into a steel tumbler or a tall bottle, and it fits both. A responsive page is that water. The content stays the same, but it flows and rearranges itself to fit whatever screen it's poured into.

Watch it happen

The same CSS at three widths

360px

768px

1440px

1/5Container is 328px. 5vw is only 18px, so the h1 stays at its 1.75rem floor: 28px.

The big ideas

What you need to know

Fluid first

Use %, fr, max-width and flex-wrap so things stretch and wrap naturally before you write any media query.

Images that shrink

img { max-width: 100%; height: auto; } stops images from overflowing small screens.

Fluid type with clamp()

clamp(1.5rem, 4vw, 3rem) grows a heading with the screen but never below or above your limits.

Touch-friendly

Buttons and links need enough size and spacing to tap with a thumb, not just a mouse pointer.

How it works

A responsive build, step by step

1
Viewport tag
Add the viewport meta tag so phones use their real width.
2
Mobile layout
Build the single-column phone version first.
3
Make it fluid
Use max-width, %, fr and clamp so things stretch smoothly.
4
Add breakpoints
Where the layout looks stretched or empty, add a min-width query.
5
Test on real devices
Check on your own phone too, not only DevTools.

See it in code

Walk through the code

css

1img, video { max-width: 100%; height: auto; }2 3.container {4  width: min(100% - 2rem, 1100px);   /* 1rem gutter each side */5  margin-inline: auto;6}7 8h1 { font-size: clamp(1.75rem, 5vw, 3.25rem); }9 10.features {11  display: grid;12  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));13  gap: 1.5rem;14}

1/4Images and videos never grow wider than their container.

Not a single media query, yet the container, heading and grid all adapt. Fluid CSS does most of the responsive work.

Save yourself the pain

Common mistakes

Oops

Fixed widths like width: 1200px on the main wrapper.

Do this instead

Use max-width or min() so it shrinks on smaller screens.

Oops

Testing only in DevTools device mode.

Do this instead

Open it on a real phone too. Touch, fonts and the address bar behave differently.

Your mission

Fix a broken layout

~30 min

Quick check

What does font-size: clamp(1rem, 3vw, 2rem) do?

Go deeper

1Rebuild one of your projects mobile-first, then scale up to desktop. Validate your understanding by applying it in a small practical example.
2Test your layout using Chrome DevTools' device toolbar across several sizes. Validate your understanding by applying it in a small practical example.
3Learn the difference between responsive design and adaptive design.