📱 CSS Advanced

Responsive Design

⏱ 2 hr2 topicsLive playground
🎯 By the end: You can write mobile-first CSS with media queries, use fluid units instead of fixed pixels, and build a layout that adapts to any screen size.

Most of your visitors are on phones — for many Vidaara learners, a phone is the only device. A responsive design is one that looks and works well at any width, from a 320px phone to a wide desktop. It's not a single feature but a mindset, and it pulls together much of what you've already learned.

1Mobile-first and media queries

The professional approach is mobile-first: write your base CSS for the small screen, then use media queries to add changes as the screen gets wider. A media query applies styles only when a condition is met:

/* base: mobile — one column */
.grid { display: grid; gap: 12px; }

/* tablet and up — two columns */
@media (min-width: 768px) {
  .grid { grid-template-columns: 1fr 1fr; }
}

/* desktop — three columns */
@media (min-width: 1024px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
}

Common breakpoints are around 480px, 768px and 1024px, but choose them based on where your design starts to look cramped, not by rote.

None of this works without the viewport tag from the Meta lesson: <meta name="viewport" content="width=device-width, initial-scale=1">. Forget it and the phone shows a shrunken desktop layout regardless of your media queries.
Key points
  • Mobile-first: write base styles for small screens, then add with @media (min-width: …).
  • Common breakpoints ~480px / 768px / 1024px — but pick them where your design needs them.
  • Responsive CSS only works with the viewport meta tag in place.

2Fluid layouts — stop using fixed pixels

Media queries handle big jumps, but a truly responsive layout is fluid between them. The trick is to avoid fixed widths and let things flex:

  • Percentages and max-width — width: 100%; max-width: 600px; fills small screens but caps on large ones. Far better than a rigid width: 600px.
  • Flexible images — img { max-width: 100%; height: auto; } (from the Images lesson) so pictures shrink to fit.
  • Flexbox and Grid — already responsive-friendly; recall repeat(auto-fit, minmax(200px, 1fr)) reflows with no media query at all.
  • clamp() — fluid sizing in one line: font-size: clamp(1rem, 4vw, 2rem) scales with the screen but never gets too small or too big.
Test at 320px — the narrowest common phone. If your page works there with no sideways scrolling, it'll work almost everywhere. Resize the playground preview to feel it.
A responsive layout — resize the preview
HTML
CSS
Live preview
What's happening: This uses auto-fit + minmax, so it's responsive with zero media queries: wide preview shows three columns, narrow preview stacks them. Drag the divider between code and preview to see it adapt live.
Key points
  • Prefer width: 100%; max-width: … over fixed pixel widths.
  • img { max-width: 100%; height: auto; } keeps images fluid; Flexbox/Grid adapt naturally.
  • clamp(min, preferred, max) gives fluid sizing that never goes too small or large.
  • Test at 320px — no horizontal scrolling means it works almost everywhere.

★ Practical: a page that adapts

In any playground:

  1. Build a card grid that is one column by default and two columns at min-width: 768px via a media query.
  2. Constrain a content block with width: 100%; max-width: 600px;.
  3. Size a heading with clamp() so it scales with the screen.
  4. Narrow the preview to ~320px and confirm there's no sideways scrolling.

Ready to test yourself?

Take the short quiz. Score 60% or more to mark this lesson complete.

Start the quiz →

💡 Log in to save your progress and earn the certificate.

← Previous
Animations
Next →
Architecture & BEM