---
id: seed:conventions/responsive-breakpoints
title: Responsive breakpoints
source_type: seed_convention
priority: warm
---

Mobile-first means the base styles ARE the mobile styles. Larger viewports add layout via `min-width` media queries. Generated CSS should never use `max-width` queries except for explicit mobile-only overrides.

**The default breakpoints:**

```
640px   sm   small phones rotated landscape, large phones portrait
768px   md   tablet portrait
1024px  lg   tablet landscape, small laptops
1280px  xl   desktop
1536px  2xl  large desktop
```

**Practical use on a landing page:**

- **0 – 640px (default).** Single column. Hero text 32–40px. Section padding 4rem. Buttons full-width.
- **640px+ (sm).** Hero text 48px. Buttons inline.
- **768px+ (md).** 2-column feature grid. Pricing cards stacked. Hero padding 6rem.
- **1024px+ (lg).** 3-column feature grid. Pricing cards in 3-column row. Hero padding 8rem. Container max-width 960px.
- **1280px+ (xl).** Container max-width 1200px. Hero display type 64–80px allowed.

**Example pattern:**

```css
.features-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
}

@media (min-width: 768px) {
  .features-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .features-grid { grid-template-columns: repeat(3, 1fr); }
}
```

**Anti-patterns:**

- Designing desktop-first and using `max-width: 768px` to "fix" mobile.
- Using `display: none` to hide entire sections on mobile — visitors notice the absence and bounce.
- Fixed `width: 1200px` instead of `max-width: 1200px; margin-inline: auto`.
- Hardcoded pixel font sizes (`font-size: 18px`) — use rem so the user's browser-zoom preferences scale predictably.

**Touch targets:** any interactive element on mobile must be at least 44×44 pixels of clickable area. Padding on the parent counts; visible size doesn't have to match.
