responsive-design

Responsive Design Patterns

Mobile-First Approach

Start with mobile styles, then add larger breakpoints:

// Mobile first
<div className="p-4 sm:p-6 lg:p-8">
  {/* Padding increases on larger screens */}
</div>

Tailwind Breakpoints

• sm: 640px
• md: 768px
• lg: 1024px
• xl: 1280px
• 2xl: 1536px

Common Patterns

Responsive Grid

<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
  {items.map(item => <Card key={item.id} />)}
</div>

Responsive Typography

<h1 className="text-2xl sm:text-3xl lg:text-4xl font-bold">
  Responsive Heading
</h1>

Hide/Show Elements

// Hide on mobile
<div className="hidden lg:block">Desktop only</div>

// Show on mobile
<div className="block lg:hidden">Mobile only</div>

Responsive Flex

<div className="flex flex-col lg:flex-row gap-4">
  <div className="lg:w-1/3">Sidebar</div>
  <div className="lg:w-2/3">Content</div>
</div>

Responsive Container

<div className="container mx-auto px-4 sm:px-6 lg:px-8">
  <div className="max-w-4xl mx-auto">
    {/* Content */}
  </div>
</div>

Touch Targets

Minimum 44x44px for mobile:

<button className="p-3 min-h-[44px] min-w-[44px] touch-manipulation">
  <Icon className="w-6 h-6" />
</button>

Responsive Images

import Image from 'next/image';

<div className="relative aspect-video w-full">
  <Image
    src="/image.jpg"
    alt="Description"
    fill
    className="object-cover"
    sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
  />
</div>

Responsive Forms

<form className="space-y-4">
  <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
    <input className="w-full px-3 py-2" />
    <input className="w-full px-3 py-2" />
  </div>
  <button className="w-full sm:w-auto px-6 py-3">
    Submit
  </button>
</form>

Responsive Navigation