responsive-design

Responsive Design

Comprehensive responsive web design patterns for building layouts that adapt seamlessly across all device types and screen sizes. This is a sub-skill — pull it into any design or build workflow that needs cross-device support.

When to Use This Skill

• Building any new page or component that must work on mobile + desktop
• Reviewing or fixing responsive layout issues
• Converting a fixed-width design to responsive
• Setting up a breakpoint system for a new project
• Optimizing images and typography for multiple viewports

Standard Breakpoint System

Use these as the default breakpoints unless the project specifies otherwise:

:root {
  --breakpoint-sm: 640px;   /* Large phones */
  --breakpoint-md: 768px;   /* Tablets */
  --breakpoint-lg: 1024px;  /* Small desktops */
  --breakpoint-xl: 1280px;  /* Desktops */
  --breakpoint-2xl: 1536px; /* Large screens */
}

Tailwind equivalents: sm:, md:, lg:, xl:, 2xl:

Step 1: Mobile-First Approach

ALWAYS design starting from the smallest screen (320px+) and progressively enhance for larger viewports.

/* Base styles = mobile (no media query needed) */
.container {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

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

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

Rules:

• MUST use min-width media queries (mobile-first), NOT max-width
• MUST include <meta name="viewport" content="width=device-width, initial-scale=1"> in HTML
• MUST use relative units (rem, em, %, vw, vh) — NOT fixed px for layout widths
• MUST NOT set fixed widths like width: 1200px — use max-width instead

Step 2: Layout Patterns

Flexbox — Use for 1-dimensional layouts

Responsive navigation:

.nav {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

@media (min-width: 768px) {
  .nav {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}