Broken Mobile Layouts in Vibecoded Apps

Test on actual mobile devices, not just browser DevTools responsive mode. Real devices reveal touch target issues, virtual keyboard conflicts, and viewport quirks that emulators miss. Check every page at 320px width — the narrowest common phone screen — and look for overlapping text, cut-off buttons, and horizontal scrolling.

Pay attention to interactive elements. Buttons and links should be at least 44x44 pixels to be tappable. Forms should not be obscured by the virtual keyboard. Modals and dropdowns should be usable on small screens without requiring precise finger placement.

Open DevTools and test at standard breakpoints: 320px, 375px, 390px, 414px, and 768px. Rotate between portrait and landscape orientation. Many vibecoded apps only work in portrait and break completely when rotated.

Interact with every form on mobile. Tap input fields and check that the virtual keyboard does not obscure the active field. Scroll long pages and verify that fixed headers and footers do not overlap content. Test pull-to-refresh behavior and swipe gestures if the app uses them.

Adopt a mobile-first CSS approach. Write base styles for mobile and add complexity at larger breakpoints with min-width media queries. This reverses the pattern AI tools typically use, where desktop styles are overridden with max-width queries that inevitably miss edge cases.

Use relative units (rem, em, percentage, vw/vh) instead of fixed pixel values. Ensure all interactive elements meet the 44px minimum touch target size. Test the virtual keyboard interaction by using position: sticky instead of position: fixed for elements that should remain visible while typing.