Responsive Design

Designs need to work across screen sizes. This guide covers how to describe responsive behavior to Claude and implement flexible layouts.

Describing Breakpoints

Common breakpoint vocabulary

• Mobile: 320-480px
• Tablet: 768px
• Desktop: 1024px+
• Large desktop: 1440px+

How to communicate

• "Below 768px, stack the columns vertically"
• "On mobile, hide the sidebar"
• "Desktop shows 3 columns, tablet shows 2, mobile shows 1"

Mobile-first prompting

• Start with mobile layout
• Add complexity for larger screens
• "Start with mobile, then expand for desktop"

Layout Patterns

Stacking

• Side-by-side on desktop
• Stacked on mobile
• "Put these side by side on desktop, stacked on mobile"

Grid adjustments

• Column count changes with width
• "3 columns on desktop, 2 on tablet, 1 on mobile"
• Consider minimum item widths

Show/hide elements

• Hide navigation on mobile, show hamburger
• Hide sidebar, show bottom navigation
• "Hide the filter sidebar on mobile, show a filter button instead"

Content priority

• Reorder content for mobile
• Lead with essential information
• "On mobile, show the price above the description"

Fluid Typography & Spacing

Fluid type sizes

• Larger headings on desktop
• Scale down proportionally on mobile
• "H1 should be 48px on desktop, 32px on mobile"

Responsive spacing

• More whitespace on larger screens
• Tighter spacing on mobile
• "Double the section padding on desktop"

Relative units

• Use rem/em for scalability
• Percentages for widths
• Viewport units for hero sections

Platform-Specific Patterns

Web

• CSS Grid and Flexbox for layout
• Media queries for breakpoints
• Container queries for component-level responsiveness
• CSS custom properties for spacing scales

iOS

• Size classes (compact/regular)
• Different layouts for iPhone vs iPad
• Safe areas for notch and home indicator
• NavigationSplitView for adaptive navigation

macOS

• Window resizing behavior
• Minimum and maximum window sizes
• Sidebar collapse behavior
• Responsive toolbar items

Example Prompts

Basic responsive layout

Make this layout responsive. On desktop, show the
sidebar and content side by side. On mobile (below 768px),
hide the sidebar and add a hamburger menu.

Responsive grid

The product grid should show:
- 4 columns on large desktop
- 3 columns on desktop
- 2 columns on tablet
- 1 column on mobile

Fluid typography

Set up responsive typography:
- H1: 48px on desktop, 32px on mobile
- H2: 32px on desktop, 24px on mobile
- Body: 18px on desktop, 16px on mobile
Transition smoothly between breakpoints.

Adaptive navigation

Implement adaptive navigation:
- Desktop: Horizontal nav bar with all items visible
- Tablet: Horizontal with overflow menu
- Mobile: Bottom tab bar with 4 main items

Responsive images

Images should fill their container width but
never exceed their natural size. On mobile,
images should be full-width with 16:9 aspect ratio.

Testing Responsive Designs

Browser tools

• Chrome DevTools device mode
• Firefox Responsive Design Mode
• Resize the window manually

What to check

• All breakpoints render correctly
• Text remains readable
• Touch targets are large enough on mobile (44px minimum)
• Nothing overflows or gets cut off

Common issues

• Text too small on mobile
• Buttons too close together
• Horizontal scroll where it shouldn't be
• Images stretching or cropping badly

Debugging Prompts

Layout broken at size

The layout breaks at around 600px width.
The sidebar and content overlap.
Can you check the breakpoint logic?

Touch targets too small

On mobile, the buttons are too small to tap easily.
Make sure all interactive elements are at least 44px.

Content overflow

On narrow screens, the text overflows its container.
Add proper wrapping and truncation.

Make It Stick with a Skill File

This guide teaches you how to prompt for responsive behavior. If you want Claude to build mobile-first with proper breakpoints, fluid type, and touch targets by default, drop the Responsive skill file into your project.

What You'll Learn

• How to describe responsive behavior
• Common layout patterns for different screens
• Fluid typography and spacing approaches
• Platform-specific considerations
• Testing and debugging responsive layouts

Exercises

1. Take an existing single-column page and use the "Responsive grid" prompt to make a card grid that shifts from 4 columns down to 1 across the breakpoints — then resize your browser to confirm each step.
2. Run the "Fluid typography" prompt on your headings and body text, then check at 320px and 1440px that text stays readable at both extremes.
3. Open Chrome DevTools device mode, tab through your mobile layout, and find any touch target under 44px — then send the "Touch targets too small" prompt to fix them.