CSS Responsive Design with Media Queries

Why Responsive Design Matters

Your visitors will land on your site from phones, tablets, and desktops. A fixed-width layout that looks great on a laptop can be unusable on a phone.

The Viewport Meta Tag

Before any CSS, every responsive page needs this in the HTML <head>:

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

Mobile-First Media Queries

Write your base CSS for small screens first, then add rules for larger screens using min-width:

.container { padding: 16px; } @media (min-width: 768px) { .container { padding: 32px; max-width: 720px; margin: 0 auto; } } @media (min-width: 1200px) { .container { max-width: 1140px; } }

Common Breakpoints

< 600px — phones
600–900px — tablets
900–1200px — small laptops
> 1200px — desktops

Don’t treat these as fixed rules — add a breakpoint wherever your design actually breaks, not at a predetermined device size.

Responsive Images

img { max-width: 100%; height: auto; }

Fluid Typography

h1 { font-size: clamp(1.5rem, 4vw, 2.5rem); }

clamp() lets text scale smoothly with the viewport instead of jumping abruptly at each breakpoint.

Practice Exercise

Take a 3-column card grid and rewrite it mobile-first: single column by default, 2 columns at 768px, 3 columns at 1100px.