🚀intermediate

Responsive Design — One Site, Every Screen

Learn to build websites that look great on phones, tablets, and desktops using media queries and flexible layouts.

Why Responsive?

Over 60% of web traffic comes from mobile phones. If your website only looks good on a desktop, you're losing most of your audience. Responsive design means building ONE website that automatically adjusts its layout based on the screen size. No separate "mobile version" needed.

The Viewport Meta Tag

html

<!-- Always add this to your <head> -->
<!-- Without it, mobile browsers zoom out to show the desktop version -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Media Queries

css

/* Default styles (mobile-first) */
.container {
  padding: 16px;
}

.card-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Tablet (768px and up) */
@media (min-width: 768px) {
  .container {
    padding: 24px;
  }
  .card-grid {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .card {
    width: 48%;
  }
}

/* Desktop (1024px and up) */
@media (min-width: 1024px) {
  .container {
    max-width: 1200px;
    margin: 0 auto;
  }
  .card {
    width: 31%;
  }
}

Responsive Tricks

• Use percentages and max-width instead of fixed pixel widths • Use rem/em for font sizes instead of px (scales with user settings) • Use Flexbox or CSS Grid — they're naturally responsive • Images: add max-width: 100%; height: auto; so they don't overflow • Test by resizing your browser window, or use Chrome DevTools device mode • Mobile-first: write mobile styles first, then add media queries for larger screens

Pro Tip

Mobile-first design is easier than desktop-first. Start with the simplest layout (single column for mobile), then add complexity for bigger screens. It's easier to add features than to remove them.

Try It Yourself

Take any webpage you've built and make it responsive. It should: stack cards in a single column on mobile, show 2 columns on tablet, and 3 columns on desktop. Use Flexbox and media queries.

How the Web Works

Ready to build?

Put what you learned into practice — pick a project and start coding.

Start Building Free