How do you implement responsive design patterns — mobile-first, container queries, and fluid typography?

Question

At a design agency:

> "Our site looks different on every device. Media queries aren't enough because components need to respond to their container size, not viewport. How do we handle this?"

Interview OS Community · Accepted Answer

## Mobile-First Approach

```css
/* Base: Mobile styles */
.card {
  display: flex;
  flex-direction: column;
  padding: 16px;
}

/* Tablet+ */
@media (min-width: 768px) {
  .card {
    flex-direction: row;
    padding: 24px;
  }
}

/* Desktop+ */
@media (min-width: 1024px) {
  .card {
    padding: 32px;
    max-width: 1200px;
  }
}
```

## Container Queries (Modern CSS)

```css
/* Define containment context */
.sidebar {
  container-type: inline-size;
  container-name: sidebar;
}

/* Respond to CONTAINER size, not viewport */
@container sidebar (min-width: 400px) {
  .card {
    flex-direction: row; /* Horizontal when sidebar is wide */
  }
}

@container sidebar (max-width: 399px) {
  .card {
    flex-direction: column; /* Vertical when sidebar is narrow */
  }
}
```

## Fluid Typography (clamp)

```css
/* Old: fixed breakpoints */
h1 { font-size: 24px; }
@media (min-width: 768px) { h1 { font-size: 48px; } }

/* New: fluid — scales smoothly between breakpoints */
h1 {
  font-size: clamp(1.5rem, 1rem + 2.5vw, 3rem);
  /* min: 1.5rem, preferred: 1rem + 2.5vw, max: 3rem */
}

/* Fluid spacing */
.section {
  padding: clamp(1rem, 0.5rem + 2vw, 3rem);
}
```

## Responsive Patterns Summary

| Pattern | Use Case |
|---------|----------|
| Mobile-first media queries | Page layout |
| Container queries | Component-level responsiveness |
| `clamp()` | Fluid typography, spacing |
| `min()`/`max()` | Constraining values |
| `aspect-ratio` | Maintaining proportions |
| `dvh` (dynamic vh) | Mobile browser address bar |

Loading Application

How do you implement responsive design patterns — mobile-first, container queries, and fluid typography?

Question Details

Suggested Solution

Mobile-First Approach

Container Queries (Modern CSS)

Fluid Typography (clamp)

Responsive Patterns Summary

Discussion (0)