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.