Responsive Design Advisor

Design responsive layouts that work across all device sizes.

Quick Start

Use mobile-first approach, flexible units (rem, %), CSS Grid/Flexbox, and test on real devices.

Instructions

Mobile-First Approach

Start with mobile, enhance for larger screens:

/* Base styles (mobile) */ .container { padding: 1rem; }

/* Tablet */ @media (min-width: 768px) { .container { padding: 2rem; } }

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

Common Breakpoints

Standard breakpoints:

/* Mobile: 0-639px (default) */

/* Tablet: 640px+ */ @media (min-width: 640px) { }

/* Laptop: 1024px+ */ @media (min-width: 1024px) { }

/* Desktop: 1280px+ */ @media (min-width: 1280px) { }

/* Large: 1536px+ */ @media (min-width: 1536px) { }

Tailwind breakpoints:

<div className=" w-full // Mobile md:w-1/2 // Tablet lg:w-1/3 // Desktop "> Content </div>

Flexible Layouts

CSS Grid:

.grid { display: grid; gap: 1rem;

/* Mobile: 1 column */ grid-template-columns: 1fr; }

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

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

Auto-fit grid:

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; }

Flexbox:

.flex-container { display: flex; flex-wrap: wrap; gap: 1rem; }

.flex-item { flex: 1 1 100%; /* Mobile: full width */ }

@media (min-width: 768px) { .flex-item { flex: 1 1 calc(50% - 0.5rem); /* Tablet: 2 columns */ } }

@media (min-width: 1024px) { .flex-item { flex: 1 1 calc(33.333% - 0.667rem); /* Desktop: 3 columns */ } }

Responsive Typography

Fluid typography:

h1 { font-size: clamp(2rem, 5vw, 4rem); }

p { font-size: clamp(1rem, 2vw, 1.125rem); }

Responsive scale:

/* Mobile */ h1 { font-size: 2rem; } h2 { font-size: 1.5rem; } p { font-size: 1rem; }

/* Desktop */ @media (min-width: 1024px) { h1 { font-size: 3rem; } h2 { font-size: 2rem; } p { font-size: 1.125rem; } }

Responsive Images

Responsive image:

img { max-width: 100%; height: auto; }

Art direction:

<picture> <source media="(min-width: 1024px)" srcSet="desktop.jpg" /> <source media="(min-width: 768px)" srcSet="tablet.jpg" /> <img src="mobile.jpg" alt="Description" /> </picture>

Responsive background:

.hero { background-image: url('mobile.jpg'); }

@media (min-width: 768px) { .hero { background-image: url('tablet.jpg'); } }

@media (min-width: 1024px) { .hero { background-image: url('desktop.jpg'); } }

Container Queries

Component-based responsive:

.card-container { container-type: inline-size; }

.card { padding: 1rem; }

@container (min-width: 400px) { .card { display: grid; grid-template-columns: 1fr 2fr; } }

Navigation Patterns

Mobile menu:

function Navigation() { const [isOpen, setIsOpen] = useState(false);

return ( <nav> {/* Mobile: Hamburger */} <button className="md:hidden" onClick={() => setIsOpen(!isOpen)} > Menu </button>

  {/* Mobile: Drawer */}
  <div className={`
    fixed inset-0 bg-white transform transition-transform
    ${isOpen ? 'translate-x-0' : '-translate-x-full'}
    md:relative md:translate-x-0
  `}>
    <ul className="flex flex-col md:flex-row">
      <li>Home</li>
      <li>About</li>
      <li>Contact</li>
    </ul>
  </div>
</nav>

); }

Touch Targets

Minimum size:

button, a { min-height: 44px; /* iOS recommendation */ min-width: 44px; padding: 0.75rem 1rem; }

Touch-friendly spacing:

.button-group button { margin: 0.5rem; /* Space between touch targets */ }

Viewport Units

Full height:

.hero { height: 100vh; /* Viewport height / height: 100dvh; / Dynamic viewport (mobile) */ }

Responsive spacing:

.section { padding: 5vw; /* Scales with viewport */ }

Common Patterns

Sidebar layout:

.layout { display: grid; gap: 2rem;

/* Mobile: Stack */ grid-template-columns: 1fr; }

@media (min-width: 1024px) { .layout { /* Desktop: Sidebar + main */ grid-template-columns: 250px 1fr; } }

Card grid:

.cards { display: grid; gap: 1rem;

/* Mobile: 1 column */ grid-template-columns: 1fr; }

@media (min-width: 640px) { .cards { /* Tablet: 2 columns */ grid-template-columns: repeat(2, 1fr); } }

@media (min-width: 1024px) { .cards { /* Desktop: 3 columns */ grid-template-columns: repeat(3, 1fr); } }

@media (min-width: 1280px) { .cards { /* Large: 4 columns */ grid-template-columns: repeat(4, 1fr); } }

Hero section:

.hero { padding: 2rem 1rem; text-align: center; }

@media (min-width: 768px) { .hero { padding: 4rem 2rem; } }

@media (min-width: 1024px) { .hero { padding: 6rem 3rem; text-align: left; display: grid; grid-template-columns: 1fr 1fr; align-items: center; } }

Testing

Browser DevTools:

• Chrome: Device toolbar (Cmd+Shift+M)

• Firefox: Responsive Design Mode

• Safari: Enter Responsive Design Mode

Test on real devices:

• iPhone (various sizes)

• Android phones

• Tablets

• Different browsers

Responsive testing tools:

• BrowserStack

• LambdaTest

• Responsively App

Responsive Checklist

Layout:

• Mobile-first approach

• Flexible grid system

• No horizontal scrolling

• Content readable at all sizes

Typography:

• Readable font sizes (16px+ body)

• Appropriate line height

• Fluid typography for headings

• Proper text wrapping

Images:

• Responsive images

• Appropriate sizes for devices

• Fast loading

• Art direction where needed

Navigation:

• Mobile menu pattern

• Touch-friendly targets (44px+)

• Easy to use on mobile

• Accessible

Performance:

• Fast on mobile networks

• Optimized images

• Minimal layout shifts

• Touch interactions smooth

Best Practices

Use relative units:

/* Good */ padding: 1rem; font-size: 1.125rem; width: 80%;

/* Avoid */ padding: 16px; font-size: 18px; width: 800px;

Test early and often:

• Test on mobile first

• Use real devices

• Test different orientations

• Test with slow connections

Progressive enhancement:

• Core functionality works on all devices

• Enhanced features for larger screens

• Graceful degradation