Responsive Design
Your design looks perfect at 1440px. Then someone opens it on their phone and everything falls apart. Responsive design fixes that — but the real skill is knowing which tool handles which problem. CSS gives you four main layout tools, and each one solves a different kind of challenge.
The Four Layout Tools
As a designer, you already think in layout systems. Frames, auto-layout, grids — Figma trained you well. CSS has direct equivalents, and once you see the connection, you can describe exactly what you want to Claude.
CSS Grid
Think of Grid as your page layout tool. You define rows and columns, then place elements into specific cells. If you have ever set up a grid system in InDesign or used Figma’s layout grids to snap sections into place, you already understand the concept. Grid is for two-dimensional layouts — when you care about both horizontal and vertical positioning at the same time.
Use it when you are building a page structure with a header, sidebar, main content area, and footer. Or when you want a product grid where items sit in precise rows and columns.
Flexbox
Flexbox handles one direction at a time — a row or a column. When you want items to space themselves out evenly, wrap to the next line when they run out of room, or center inside a container, Flexbox is the answer. It is the CSS equivalent of Figma’s auto-layout. If you have ever set a frame to “hug contents” or “fill container” with a gap between children, you were thinking in Flexbox.
Use it for navigation bars, button groups, card rows that wrap, or any time you are arranging items along a single axis.
Container Queries
Here is where things get interesting. Instead of asking “how wide is the screen?”, container queries ask “how wide is my container?” A card component sitting in a wide main content area can show an image beside the text. The same card in a narrow sidebar can stack the image on top. The card adapts to its context, not the viewport.
This is a newer CSS feature, but it is powerful for component-based design — exactly how you already think in Figma.
Media Queries
The classic approach: “when the screen is narrower than X pixels, change the layout.” Media queries still have their place, especially when you need to completely restructure a page at a specific breakpoint — swapping a desktop navigation for a mobile hamburger menu, for example. But Grid and Flexbox handle most day-to-day responsiveness on their own now. You will reach for media queries less often than you might expect.
When to Use What
When you are prompting Claude, pick the right tool for the job:
- Building a page layout with multiple sections? Use Grid. Tell Claude where each section goes and how columns should reflow.
- Arranging items in a row that should wrap? Use Flexbox. Describe the direction, spacing, and wrapping behavior.
- Component that needs to adapt to its container size? Use Container Queries. Describe how the component should look at different widths.
- Need to completely change the layout at a breakpoint? Combine Media Queries with Grid. Describe the before and after.
Most pages use a combination. Grid for the overall page structure, Flexbox for component internals, media queries for the big layout shifts, and container queries for components that live in different contexts.
Testing on Real Devices
Building responsive layouts without testing them is like designing without zooming out. Open browser DevTools with Cmd + Option + I, then click the device icon (top-left of the DevTools panel) to enter responsive mode.
Test at these common breakpoints:
- 375px — phone (iPhone SE and similar)
- 768px — tablet
- 1024px — small laptop
- 1440px — desktop
Drag the viewport width slowly between these sizes. Layouts should transition smoothly, not snap awkwardly. Watch for text that overflows, buttons that crowd together, and images that stretch or crop badly.
If you can, test on a real phone too. Simulators miss things — touch target size feels different under your thumb than under a mouse pointer, and font rendering on actual screens can surprise you.
Try This
Give these prompts to Claude and watch how it handles responsiveness:
Responsive grid layout
Make this layout responsive. On desktop, show 3 columns.
On tablet, 2 columns. On mobile, single column.
Use CSS Grid.Mobile navigation
The navigation should collapse into a hamburger menu on mobile.
On desktop, show all nav items horizontally. The transition
should happen below 768px.Fluid typography
Set up responsive typography. H1 should be 48px on desktop
and 32px on mobile, scaling smoothly between them. Body text
should be 18px on desktop and 16px on mobile.Debugging Responsive Issues
When something breaks at a certain screen size, describe the problem precisely:
The layout breaks at around 600px width. The sidebar
and content overlap. Can you check the breakpoint logic?On mobile, the buttons are too small to tap easily.
Make sure all interactive elements are at least 44px tall.On narrow screens, the text overflows its container.
Add proper wrapping and prevent horizontal scroll.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.
Key Takeaways
- The four CSS layout tools and when to use each one
- How to describe responsive behavior to Claude
- How to test layouts across screen sizes
- Common debugging patterns for responsive issues