Responsive Design

Create interfaces that work beautifully across all devices and screen sizes.

Instructions

1. Start mobile-first - Write base styles for mobile, enhance for larger screens
2. Use fluid layouts - Prefer percentages and fr units over fixed pixels
3. Set strategic breakpoints - Break at content needs, not specific devices
4. Test on real devices - Emulators miss touch and performance nuances
5. Optimize for touch - Minimum 44x44px touch targets on mobile

Breakpoint Strategy

Tailwind Default Breakpoints