My app is a website. Full screen perfect but in smaller screens and mobile a lot of the text and icons become extremely small, negatively impacting the styling and legibility of the site on phones.
How can I config or optimize for this? When I tell the agent to increase components only for mobile, those same components and text het larger on the regular view.
Please advise
Hi Arthur, what you tried usually works for me. But I guess that if you ask Agent for that kind of change in Lite mode it could fail, because it won´t create the the two views that you are asking. In lite mode I assume it would just change the size of the components as you described. Can you confirm which Agent mode are you using for this?
Try this
Audit and fix the entire app for mobile responsiveness. Here are my specific requirements:
Add a proper viewport meta tag in the root HTML if missing:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Convert all fixed-width containers to flex or grid layouts. No hardcoded pixel widths on parent containers. Use max-width with percentage or rem units instead.
Replace any pixel-based font sizes with clamp() for fluid typography. Example pattern:
Headings: font-size: clamp(1.5rem, 4vw, 3rem);
Body text: font-size: clamp(1rem, 2.5vw, 1.25rem);
Small/caption text: font-size: clamp(0.85rem, 2vw, 1rem);
Use Tailwind breakpoint prefixes properly (if using Tailwind). Base styles should be mobile-first. Apply md: and lg: prefixes for larger screens only. Example: text-base md:text-lg lg:text-xl. Do NOT set large base sizes and then try to override them down for mobile.
Icons and SVGs should use em or rem sizing so they scale with their parent text. No fixed 24px/32px icon sizes without responsive overrides.
Ensure all flex containers use flex-wrap: wrap where content could overflow on small screens. Add gap instead of margin hacks for spacing.
Set a minimum touch target of 44x44px on all buttons and interactive elements for mobile usability.
Test every page/view at 375px width (iPhone SE) and 768px (tablet) and confirm nothing overflows, truncates, or becomes unreadable.
Critical rule: Build mobile-first. Start with styles that work at 375px, then layer on complexity for larger breakpoints using min-width media queries. Do not write desktop styles first and try to shrink them down.
As Eric said.
For future apps, the key phrase to use when starting most builds is “make the website responsive”.
The agent will understand this requirement, as it is how most websites are created these days, and they just automatically adapt to all sorts of different screen sizes - desktops, laptops, and then about 17,000 different mobile screen sizes 