Responsive Design Expert

Description: Create fluid, mobile-first designs that work beautifully across all screen sizes

Core Principles

Build responsive layouts that adapt gracefully from mobile phones to large desktop monitors using modern CSS and best practices.

Mobile-First Approach

/* ✅ Mobile-first: Start with mobile, enhance for larger screens */
.container {
  padding: 1rem;
  width: 100%;
}

@media (min-width: 768px) {
  .container {
    padding: 2rem;
    max-width: 720px;
  }
}

@media (min-width: 1024px) {
  .container {
    padding: 3rem;
    max-width: 960px;
  }
}

/* ❌ Desktop-first: Harder to maintain */
.container {
  padding: 3rem;
  max-width: 960px;
}

@media (max-width: 1024px) {
  .container {
    padding: 2rem;
    max-width: 720px;
  }
}

Breakpoints

/* Standard breakpoints */
/* Mobile: < 640px (default) */
/* Tablet: 640px - 1024px */
/* Desktop: > 1024px */

:root {
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
}

/* Tailwind-style breakpoints */
@media (min-width: 640px) { /* sm */ }
@media (min-width: 768px) { /* md */ }
@media (min-width: 1024px) { /* lg */ }
@media (min-width: 1280px) { /* xl */ }

Fluid Layouts

CSS Grid

/* Responsive grid without media queries */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

/* 12-column grid system */
.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
}

.col-span-6 {
  grid-column: span 6; /* 50% width */
}

@media (max-width: 768px) {
  .col-span-6 {
    grid-column: span 12; /* Full width on mobile */
  }
}

Flexbox

/* Responsive flex layout */
.flex-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.flex-item {
  flex: 1 1 300px; /* grow, shrink, basis */
}

/* Center content */
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

Responsive Typography

/* Fluid typography using clamp */
h1 {
  font-size: clamp(2rem, 5vw, 4rem);
  /* min: 2rem, preferred: 5vw, max: 4rem */
}

body {
  font-size: clamp(1rem, 2.5vw, 1.25rem);
}

/* Using CSS custom properties */
:root {
  --font-size-base: 16px;
  --font-size-lg: 18px;
}

@media (min-width: 768px) {
  :root {
    --font-size-base: 18px;
    --font-size-lg: 20px;
  }
}

body {
  font-size: var(--font-size-base);
}

Responsive Images

<!-- Modern responsive images -->
<picture>
  <source
    media="(min-width: 1024px)"
    srcset="hero-desktop.webp 1x, hero-desktop@2x.webp 2x"
  >
  <source
    media="(min-width: 768px)"
    srcset="hero-tablet.webp 1x, hero-tablet@2x.webp 2x"
  >
  <img
    src="hero-mobile.webp"
    srcset="hero-mobile@2x.webp 2x"
    alt="Hero image"
    loading="lazy"
  >
</picture>

<!-- srcset with sizes -->
<img
  src="photo.jpg"
  srcset="photo-400w.jpg 400w,
          photo-800w.jpg 800w,
          photo-1200w.jpg 1200w"
  sizes="(max-width: 600px) 100vw,
         (max-width: 1200px) 50vw,
         33vw"
  alt="Photo"
>

Container Queries (Modern)

/* Responsive based on container size, not viewport */
.card-container {
  container-type: inline-size;
  container-name: card;
}

.card-title {
  font-size: 1.5rem;
}

@container card (min-width: 400px) {
  .card-title {
    font-size: 2rem;
  }

  .card-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

Responsive Navigation

/* Mobile hamburger menu */
.nav-toggle {
  display: block;
}

.nav-menu {
  display: none;
  flex-direction: column;
}

.nav-menu.active {
  display: flex;
}

@media (min-width: 768px) {
  .nav-toggle {
    display: none;
  }

  .nav-menu {
    display: flex;
    flex-direction: row;
  }
}

Testing Responsive Design

Viewport Meta Tag

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

Device Testing Checklist

• iPhone SE (375px)
• iPhone 12/13 (390px)
• iPad (768px)
• Desktop (1024px+)
• Large desktop (1920px+)
• Test landscape orientations
• Test with browser zoom (125%, 150%)

When to Use This Skill

• Designing responsive layouts
• Converting desktop designs to mobile
• Optimizing for different screen sizes
• Improving mobile user experience

---

Remember: Design for mobile first, then progressively enhance for larger screens!