home/business/responsive-design-prompt

Responsive Design.prompt

GPTClaudeGemini··▲ 1,014 copies·updated 2026-07-14

responsive-design-prompt.prompt

# Make Responsive

Convert fixed-width layouts to responsive designs using mobile-first approach.

## Strategy

1. Start with mobile layout
2. Add breakpoints for larger screens
3. Use relative units (rem, %, vw/vh)
4. Implement flexible grids
5. Test on multiple devices

## Techniques

- **Fluid Typography**: `clamp(1rem, 2vw + 1rem, 2rem)`
- **Responsive Images**: `srcset`, `picture` element
- **Container Queries**: For component-level responsiveness  
- **Grid/Flexbox**: Flexible layouts
- **Media Queries**: Breakpoint-based adjustments

## Breakpoints

when to use it

Community prompt sourced from the open-source GitHub repo AmadeusITGroup/ai-primitives-hub (Apache-2.0). A "Responsive Design.prompt" style prompt — adapt the placeholders and specifics to your task. Imported as-is and not independently retested here, so check the output before relying on it.