Responsive Design Implementation

---
name: responsive-design-implementation
description: "Responsive Design Implementation builds layouts that adapt fluidly across devices using mobile-first CSS, flexbox, grid, container queries, and cross-device testing."
metadata:
  tags: "autonomous-agents, responsive-design, css, flexbox, grid, container-queries, mobile-first, cross-device-testing"
  source: "https://skilldb.dev/skills/autonomous-agent-skills/responsive-design-implementation"
  pack: "autonomous-agent-skills"
  category: "Autonomous Agents"
---

# Responsive Design Implementation

## When to use this skill
Use when the user says things like:
- "I need a mobile-first responsive layout"
- "Show me how to use flexbox and grid for responsiveness"
- "Explain container queries and how to test across devices"
- "I want to pick breakpoints by content, not devices"


You are an autonomous agent that builds layouts which work beautifully across every screen size. From small mobile phones to ultrawide monitors, the interfaces you create adapt fluidly to the available space. Responsive design is not about making things shrink — it is about designing for every context.

## Philosophy

The web is inherently flexible. HTML without CSS already flows to fit any viewport. Responsive design means preserving that flexibility rather than fighting it with fixed dimensions. Start with the smallest screen, add complexity as space permits, and let the content — not arbitrary device widths — determine your breakpoints.

## Techniques

### Mobile-First Approach
- Write base styles for the smallest viewport. Add complexity through `min-width` media queries as the screen grows.
- Mobile-first forces you to prioritize content. If something is not important enough for mobile, question whether it is needed at all.
- Base styles should be functional without any media queries. Media queries enhance, they do not fix.
- Use progressive disclosure: show essential content by default, reveal supplementary content as space allows.

### Breakpoint Selection
- Do not choose breakpoints based on popular device widths. Resize your browser and add a breakpoint where the layout breaks.
- Common starting points: 480px (large phones), 768px (tablets), 1024px (laptops), 1280px (desktops). Adjust to your content.
- Use fewer breakpoints. Most layouts need only 2-3 breakpoints. More than 4 suggests the design is too rigid.
- Define breakpoints as CSS custom properties or design tokens for consistency across the codebase.

### Flexbox vs Grid Decisions
- Use **Flexbox** for one-dimensional layouts: navbars, card rows, centering content, distributing space along a single axis.
- Use **CSS Grid** for two-dimensional layouts: page-level structures, complex card grids, dashboard layouts with rows and columns.
- Flexbox is content-driven (items determine the layout). Grid is layout-driven (the grid determines item placement).
- They compose well together. Use Grid for the page scaffold and Flexbox for components within grid cells.
- Use `gap` on both Flexbox and Grid instead of margin hacks for consistent spacing.

### Fluid Typography
- Use `clamp()` for font sizes that scale smoothly: `font-size: clamp(1rem, 0.5rem + 1.5vw, 2rem)`.
- Set a minimum size that is readable on mobile and a maximum that looks good on desktop.
- Apply fluid typography to headings and hero text. Body text usually works fine at a fixed `1rem`.
- Use `rem` units so font sizes respect the user's browser font size preference.

### Container Queries
- Use `@container` queries to make components responsive to their container rather than the viewport.
- This enables truly reusable components — a card component adapts whether it is in a sidebar or a main content area.
- Define containment with `container-type: inline-size` on the parent element.
- Container queries are ideal for design systems and component libraries where viewport context is unknown.

### Viewport Units and Sizing
- Use `dvh` (dynamic viewport height) instead of `vh` to handle mobile browser chrome correctly.
- Use `svh` and `lvh` when you need the smallest or largest viewport height explicitly.
- Avoid `vw` for element widths — it does not account for scrollbars and can cause horizontal overflow.
- Use percentage widths and `max-width` for content containers instead of viewport units.

### Touch Targets
- Minimum touch target size is 44x44 CSS pixels (WCAG) or 48x48 (Material Design recommendation).
- Add padding rather than increasing font size to enlarge touch targets.
- Space interactive elements at least 8px apart to prevent accidental taps.
- Make the entire clickable area of list items and cards tappable, not just the text.

## Best Practices

- Set `<meta name="viewport" content="width=device-width, initial-scale=1">` on every page.
- Use `max-width` on content containers (typically 60-80ch for text, 1200-1400px for page layouts).
- Use responsive images with `srcset` and `sizes` attributes or the `<picture>` element to serve appropriately sized images.
- Collapse complex navigation into a hamburger menu or bottom sheet on mobile.
- Test at actual breakpoint boundaries, not just popular device sizes. Resize the browser slowly from 320px to 2560px.
- Use `overflow-x: hidden` on the body only as a last resort. Fix the element causing horizontal overflow instead.
- Prefer CSS solutions over JavaScript for responsive behavior. Media queries and container queries are more performant.
- Test with real content, not Lorem Ipsum. Real content has varying lengths that expose layout issues.
- Use `object-fit: cover` or `contain` for images in responsive containers to prevent distortion.

## Anti-Patterns

- **Fixed pixel widths on containers.** Using `width: 960px` instead of `max-width: 960px` breaks small screens instantly.
- **Hiding content on mobile with `display: none`.** If users need the content, find a way to present it. If they do not, remove it entirely.
- **Horizontal scrolling.** Unless you are building a carousel or data table, horizontal scroll on a page is a layout bug.
- **Device-specific breakpoints.** Targeting `@media (width: 375px)` for iPhone is brittle. Use content-driven breakpoints.
- **Using `!important` to override responsive styles.** This creates specificity wars. Structure your media queries properly instead.
- **Neglecting landscape orientation.** Many mobile users rotate their phones. Test that the layout works in both orientations.
- **Text that does not wrap.** Avoid `white-space: nowrap` on content text. Use `overflow-wrap: break-word` for long strings like URLs.
- **Ignoring the 320px viewport.** Some devices and accessibility zoom levels reach very narrow widths. Ensure usability down to 320px.