Responsive Design

Responsive web design is the practice of building websites that look and work well on any screen size — from small mobile phones to large desktop monitors. It is not optional: over half of global web traffic comes from mobile devices.

The Viewport Meta Tag

The foundation of responsive design on mobile is this tag in the HTML head:

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

Without it, mobile browsers render the page at a desktop width and then scale it down — making text tiny and unusable. This tag tells the browser to match the page width to the device screen.

Fluid Layouts

Use relative units instead of fixed pixels for widths:

/* Fixed — breaks on small screens */
.container { width: 960px; }

/* Fluid — adapts to the viewport */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto; /* centre on wide screens */
  padding: 0 16px; /* prevent content touching screen edges */
}

Media Queries

Media queries apply CSS rules only when certain conditions are met — most commonly when the viewport is above or below a certain width:

/* Mobile-first base styles */
.card-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Tablet and up */
@media (min-width: 768px) {
  .card-grid {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .card-grid > * {
    flex: 0 0 calc(50% - 8px);
  }
}

/* Desktop and up */
@media (min-width: 1024px) {
  .card-grid > * {
    flex: 0 0 calc(33.333% - 11px);
  }
}

Mobile-First vs. Desktop-First

Mobile-first means you write base styles for small screens and use min-width media queries to add styles for larger screens. This approach is recommended because:

• Small screens get the lightest CSS — better performance
• Layouts progressively enhance rather than degrade
• Forces you to prioritise content

Desktop-first is the opposite — base styles for large screens and max-width media queries to adjust for smaller ones. Avoid this approach for new projects.

Flexible Images

Prevent images from overflowing their containers:

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

This single rule is one of the most important in responsive design.

Common Breakpoints

While you should design based on your content (not devices), these breakpoints are widely used:

/* Small mobile */
@media (min-width: 480px) { ... }