Symptoms
- The page scrolls sideways on a phone
- Text or buttons run off the screen
- Cards and columns get squeezed into thin strips
- Menus or modals cover the whole screen and cannot be closed
Why it happens
v0 usually designs on a wide preview. It often uses fixed widths and multi-column grids that make sense on a laptop. On a phone there is simply not enough room.
Tailwind, which v0 uses, is built for this. You start with the phone layout and add more columns on bigger screens. Most fixes are small class changes.
Try this first
-
Test on a real phone size
Open the browser developer tools and switch to a phone size, around 375 pixels wide. Scroll every page and note what breaks.
-
Replace fixed widths
Look for classes with fixed sizes, like w-[800px]. Use full width with a maximum instead.
<!-- Before --> <div class="w-[800px]"> <!-- After --> <div class="w-full max-w-3xl"> -
Stack columns on small screens
Grids should start with one column and add more on larger screens.
<!-- Before --> <div class="grid grid-cols-3 gap-6"> <!-- After --> <div class="grid grid-cols-1 gap-6 md:grid-cols-3"> -
Find what causes sideways scrolling
Usually one element is wider than the screen. Long words, wide tables and images without max-width are common causes. Wrap wide tables in a box that scrolls on its own.
<div class="overflow-x-auto"> <table>...</table> </div> -
Check menus and pop-ups
Make sure menus and modals can scroll and close on a small screen, and that buttons are big enough to tap.
When to stop and call a person
Bring in a front-end developer if many screens need work, if the app has complex tables or dashboards, or if you want the mobile version designed properly instead of squeezed.
Questions people ask
Why did v0 not make it responsive?
It often does, partly. But generated layouts are tuned to the preview size. Always test on a phone before you ship.
Do I need a separate mobile app?
Usually not. A responsive web app works well on phones for most products.