| name | responsive-layout-master |
| description | Create layouts that look perfect on every device and screen size. |
Responsive Layout Master
This skill ensuring that a website's layout fluidly adapts to mobile, tablet, and desktop screens using modern CSS techniques.
Instructions
- Use a mobile-first design approach.
- Define standard breakpoints (e.g., 640px, 768px, 1024px).
- Implement flexible units (rem, em, %, vh/vw) over fixed pixels.
- Use CSS Grid and Flexbox for complex alignment.
- Ensure images and typography scale correctly without breaking the layout.
Examples
- "Make this 3-column desktop layout stack into a single column for mobile."
- "Debug a responsive issue where the sidebar overlaps the content on tablets."