Back to skills

Responsive Design

Implement modern responsive layouts using container queries, fluid typography, CSS Grid, and mobile-first breakpoint strategies for adaptive interfaces.

Views

4

Uses

0

Updated

June 11, 2026

Author

wshobson

Skill creator

Source

wshobson/agents
ColslsAdded by Colsls
web-designresponsivemobile-firstlayoutcssbest-practicesux-designui-design
PropertyValue
nameresponsive-design
descriptionImplement modern responsive layouts using container queries, fluid typography, CSS Grid, and mobile-first breakpoint strategies. Use when building adaptive interfaces, implementing fluid layouts, or creating component-level responsive behavior.
keywordsweb-design, responsive, mobile-first, layout, css, best-practices, ux-design, ui-design

Responsive Design

Master modern responsive design techniques to create interfaces that adapt seamlessly across all screen sizes and device contexts.

When to Use This Skill

  • Implementing mobile-first responsive layouts
  • Using container queries for component-based responsiveness
  • Creating fluid typography and spacing scales
  • Building complex layouts with CSS Grid and Flexbox
  • Designing breakpoint strategies for design systems
  • Implementing responsive images and media
  • Creating adaptive navigation patterns
  • Building responsive tables and data displays

Detailed patterns and worked examples

Detailed pattern documentation lives in references/details.md. Read that file when the navigation tier above is insufficient.

Best Practices

  1. Mobile-First: Start with mobile styles, enhance for larger screens
  2. Content Breakpoints: Set breakpoints based on content, not devices
  3. Fluid Over Fixed: Use fluid values for typography and spacing
  4. Container Queries: Use for component-level responsiveness
  5. Test Real Devices: Simulators don't catch all issues
  6. Performance: Optimize images, lazy load off-screen content
  7. Touch Targets: Maintain 44x44px minimum on mobile
  8. Logical Properties: Use inline/block for internationalization

Common Issues

  • Horizontal Overflow: Content breaking out of viewport
  • Fixed Widths: Using px instead of relative units
  • Viewport Height: 100vh issues on mobile browsers
  • Font Size: Text too small on mobile
  • Touch Targets: Buttons too small to tap accurately
  • Aspect Ratio: Images squishing or stretching
  • Z-Index Stacking: Overlays breaking on different screens