| name | responsive-design |
| description | Mobile-first and fluid layout best practices. |
Responsive Design Skill
Context
FinanzApp must look great on all devices, from mobile phones to high-res monitors.
Guidelines
- Mobile-First: Always start with mobile styles and add enhancements via
@media queries for larger screens.
- Fluid Units: Use relative units like
rem, em, vw, vh, and % instead of fixed px.
- Grid & Flexbox: Use CSS Grid for overall layout and Flexbox for component-level alignment.
- Breakpoints: Use standard, consistent breakpoints across the application.
- Touch Targets: Ensure buttons and links are large enough for touch interaction (min 44x44px).