CC
0 XP
0

Chapter 3: Polish & Design

Responsive Layout

build5 min

Responsive Layout

Your app looks great on your laptop. But what about phones? Tablets? Responsive design ensures your app works everywhere.

Ask Claude Code for responsive layout

"Make the todo app fully responsive. Use a mobile-first approach: the default styles should work on mobile (full width, stacked layout), then add Tailwind breakpoints for larger screens. On desktop, the main content should be centered with a max-width of 640px. On mobile, use full-width with comfortable padding. Make sure the form input and button stack vertically on very small screens."

💡Info

Mobile-first means you write the base styles for the smallest screen, then add complexity for larger ones. This is how Tailwind works by default — unprefixed classes are mobile, and sm:, md:, lg: add styles at larger breakpoints.

Tailwind's breakpoint system

sm: 640px    — Small tablets, large phones in landscape
md: 768px    — Tablets
lg: 1024px   — Laptops
xl: 1280px   — Desktops
2xl: 1536px  — Large monitors

For a todo app, you mostly need two breakpoints:

  • Default (mobile) — Full width, stacked layout
  • sm and above — Centered content, horizontal form layout

Key responsive adjustments

  1. Container — Full width on mobile, max-w-xl centered on desktop
  2. Form layout — Input and button stack on mobile, inline on desktop
  3. Padding — More generous padding on larger screens
  4. Typography — Slightly larger on desktop, comfortable on mobile
  5. Todo items — Priority badges might move below the text on mobile
  6. Header — Title and theme toggle stay in one row, but adjust spacing

The responsive container

<main className="mx-auto w-full max-w-2xl px-4 py-6 sm:px-6 sm:py-10">
  {/* Your app content */}
</main>

This gives you:

  • Full width with 16px padding on mobile
  • Centered with 24px padding and a max width on larger screens

Responsive form layout

"On screens smaller than 640px, the todo input and add button should stack vertically (button below the input, full width). On larger screens, they should sit side by side."

<form className="flex flex-col gap-2 sm:flex-row">
  <input className="flex-1" />
  <button className="w-full sm:w-auto">Add</button>
</form>
✅Tip

Test responsive layout by resizing your browser window, or use the browser's device emulation (open DevTools, click the device icon). Claude Code can't see your screen, so you need to check visually and report back if something looks off.

Touch-friendly targets

Mobile users tap with fingers, not cursors. Make sure interactive elements are big enough:

"Ensure all buttons and interactive elements have a minimum tap target of 44x44px on mobile. This includes the checkbox, delete button, and theme toggle."

⚠️Warning

44x44 pixels is the recommended minimum touch target size (per Apple and Google guidelines). Smaller targets lead to frustration and mis-taps. You can achieve this with padding even if the visible element is smaller.

Testing on real devices

After Claude Code makes the changes, test at these widths:

  • 375px — iPhone SE / small phone
  • 390px — iPhone 14 / standard phone
  • 768px — iPad / tablet
  • 1024px — Laptop
  • 1440px — Desktop

"Review the responsive layout at mobile (375px), tablet (768px), and desktop (1440px) widths. Fix any overflow, cramped spacing, or elements that don't adapt properly."

Your app now works beautifully on any screen size — from a phone on the subway to a wide monitor at your desk.

PreviousNext