Back to Discover
🚁 Lovable Prompt Library example - Mobile Responsiveness
Example from Lovable's library for making an app fully responsive using a mobile-first strategy, without changing core functionality., provided under the MIT license
Prompt
Our app needs to be fully responsive across mobile, tablet, and desktop.
- Follow a mobile-first strategy: prioritize the layout for small screens, then adjust for larger screens.
- Use modern UI/UX best practices for responsive design. (For Tailwind CSS, use the standard breakpoints `sm, md, lg, xl` – no custom breakpoints unless necessary.)
- Ensure every page (especially the dashboard and project detail pages) reflows properly on a small screen: elements should stack or resize as needed, text should remain readable, and no content should overflow off-screen.
- Do not change the core design or functionality, just make sure it flexibly adapts to different screen sizes.
After making changes, please double-check the layout at iPhone 12 dimensions and a typical desktop width.