Responsive Web Design: A Complete Guide

Responsive web design ensures your site looks good on every device — phone, tablet, laptop, and desktop.

The Three Pillars

1. Fluid Grids

Use relative units instead of fixed pixel widths:

/* Avoid */
.container {
  width: 1200px;
}

/* Prefer */
.container {
  width: 100%;
  max-width: 1200px;
}

2. Flexible Images

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

This makes images scale down with their container. They won’t overflow on small screens.

3. Media Queries

/* Mobile first — base styles for small screens */
.container {
  display: flex;
  flex-direction: column;
}

/* Tablet and up */
@media (min-width: 768px) {
  .container {
    flex-direction: row;
  }
}

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

Common Breakpoints

/* Phone (portrait) */
@media (max-width: 480px) { }

/* Phone (landscape) / small tablet */
@media (max-width: 768px) { }

/* Tablet / small desktop */
@media (max-width: 1024px) { }

/* Desktop */
@media (min-width: 1025px) { }

Don’t chase specific device sizes. Use breakpoints where your layout breaks.

Mobile First vs Desktop First

Mobile first is the recommended approach:

1. Write base styles for the smallest screen
2. Add min-width media queries for larger screens
3. Forces you to prioritize content

/* Mobile first */
.article { font-size: 16px; }

@media (min-width: 768px) {
  .article { font-size: 18px; }
}

Responsive Units

Fluid Typography with clamp

body {
  font-size: clamp(16px, 1.5vw, 22px);
}

Text scales fluidly between 16px (minimum) and 22px (maximum).

Testing Responsive Designs

• Browser DevTools — Toggle device toolbar (Ctrl+Shift+M)
• Resize the browser — Drag the window edge
• Real devices — Test on actual phones and tablets
• Sauce Labs / BrowserStack — Cloud device testing

Related: See our CSS Flexbox guide and how to center a div.