Why your vibe-coded website breaks on mobile and how to fix it

Every vibe coding tool generates desktop-first layouts. The output looks correct in the browser preview. Then you open it on your phone and the hero headline overflows, the navigation is unusable, the feature grid stacks into a single unreadable column, and the CTA button is too small to tap. This is the most common complaint from vibe coders building real products with Bolt, Replit, Lovable, and Claude Code.

The gap between desktop preview and mobile reality is not a minor polish issue. More than half of all web traffic is mobile. A vibe-coded website that breaks on mobile is a website that breaks for the majority of its visitors. The good news: every failure has a specific CSS fix, and most can be prevented entirely by prompting correctly or starting from a responsive template.

Why AI code generators default to desktop-first

The training data for every major AI code generator is dominated by desktop component examples. Open-source React components, Tailwind CSS tutorials, and SaaS landing page repositories on GitHub are overwhelmingly authored and screenshotted at desktop widths. The model generates for the viewport it has seen most often in its training data. That viewport is 1280px to 1440px wide.

Browser previews inside vibe coding tools reinforce the problem. The default preview pane in Bolt, Replit, and Lovable opens at desktop width. The developer sees a correct layout, approves it, and moves on. No mobile preview is triggered automatically. The model never receives feedback that its output fails at 375px.

Mobile responsiveness requires explicit breakpoint logic: media queries, fluid units, and conditional layout rules. AI skips all of this unless the prompt specifically requests it. The model does not omit mobile styles because the task is difficult. It omits them because mobile was not mentioned, and its training data rarely pairs a component with its corresponding mobile adaptation in the same file.

The six mobile failures and how to fix each one

These are the specific breakdowns that appear when you open a vibe-coded website on a phone. Each one has a direct CSS fix. Most AI-generated websites carry three or more of these simultaneously.

1. Hero headline overflow

AI generates large display text at fixed pixel sizes, typically 48px to 64px, without any mobile scaling. A 48px headline that fits comfortably on a 1440px viewport overflows or wraps awkwardly on a 375px screen. The text either spills past the edge of the viewport or stacks into six lines where the desktop version had two.

The fix is fluid typography using the CSS clamp() function. This single line scales the heading smoothly from mobile to desktop without a media query:

font-size: clamp(24px, 5vw, 48px);

The first value (24px) is the minimum size on the smallest screens. The middle value (5vw) is the fluid scaling factor. The last value (48px) is the maximum size on desktop. The browser calculates the correct size at every viewport width in between. Apply the same pattern to subheadlines: clamp(14px, 2.5vw, 18px) keeps secondary text readable at every breakpoint.

2. Navigation that disappears or collapses wrong

AI generates horizontal navbars with four to six links spread across the full viewport width. On a 375px screen, those links either wrap into multiple lines (breaking the visual structure) or overflow past the right edge of the screen. The most common AI "fix" is to add display: none on the nav links at mobile widths. This removes the navigation entirely, leaving visitors with no way to navigate the site.

The correct fix is a hamburger menu that reveals the full navigation on tap. Prompt the AI explicitly: "include a hamburger menu icon that toggles a mobile navigation drawer below 768px." If the AI still produces a broken mobile nav, the faster path is to start from a navigation template that already includes mobile menu logic. Every Moon navbar template ships with a working hamburger menu, scroll-state transitions, and correct touch target sizes.

The mobile menu itself needs attention. Links inside it should be full-width tap targets with at least 44px of height and 16px of vertical padding between items. A cramped list of 12px links inside a dropdown is not a usable mobile navigation.

3. Feature grids that do not stack correctly

The default vibe-coded features section is a three-column grid. On mobile, each column collapses to full width, producing three tall cards stacked vertically. The spacing between cards that worked at desktop density, typically 24px to 32px, becomes excessive at mobile density. The cards look disconnected rather than grouped. Padding inside each card, set for a wide layout, wastes space on a narrow screen.

The fix is CSS Grid with an auto-fit column rule that handles the breakpoint automatically:

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

This rule tells the browser to fit as many 280px-minimum columns as the viewport allows. On a 375px screen, that is one column. On a tablet, two. On desktop, three. No media query needed. The gap value applies uniformly and looks correct at every width. For card padding, use clamp(16px, 3vw, 32px) to scale internal spacing with the viewport.

4. Images that do not scale

AI frequently hardcodes image dimensions in pixels: width="600" or width: 480px in inline styles. On a 375px viewport, a 600px image overflows the container and triggers horizontal scroll on the entire page. The image itself is cropped or hidden behind the right edge of the screen.

The fix is two CSS rules applied globally to all images:

img {
  max-width: 100%;
  height: auto;
}

This constrains every image to the width of its parent container while preserving the aspect ratio. For hero background images and full-bleed visuals, use object-fit: cover with a height-constrained container so the image fills the space without distortion. The container, not the image, controls the dimensions.

5. Touch targets too small

AI generates buttons sized for mouse interaction: 36px tall with 8px to 12px of padding. On a touchscreen, these buttons are difficult to tap accurately. Apple's Human Interface Guidelines recommend a minimum touch target of 44 by 44 points. Google's Material Design specifies 48 by 48dp. A 36px button with 8px padding fails both standards.

The fix is minimum sizing on all interactive elements:

button, a {
  min-height: 44px;
  padding: 12px 24px;
}

This applies to buttons, links in navigation, form inputs, and any other tappable element. Do not reduce padding on mobile to save space. The opposite is correct: mobile interactive elements need more padding than desktop ones because fingers are less precise than cursors. Inline text links are the exception. They do not need 44px height, but the surrounding line-height should be generous (1.7 or higher) so adjacent links are not too close together vertically.

6. Horizontal scroll on the body

This is the most frustrating mobile failure because it is invisible in desktop preview and difficult to debug. The page scrolls horizontally on mobile, revealing a strip of empty space to the right. The cause is one of three things: a fixed-width element wider than 375px, an absolutely positioned decorative element extending past the viewport edge, or a container set to width: 100vw (which includes the scrollbar width on desktop browsers and can cause overflow on mobile).

The quick safety net is a single rule on the body:

body {
  overflow-x: hidden;
}

/* And on every container: */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

The overflow-x: hidden rule hides the symptom. The real fix is replacing every instance of 100vw with 100%, adding max-width: 100% to all containers, and ensuring box-sizing: border-box is set globally so padding does not push elements past their container width. Search the generated code for 100vw, position: absolute, and any hardcoded pixel width above 400px. Those are the three sources of horizontal overflow in AI-generated code.

How to prompt for responsive output from the start

The most effective way to get responsive vibe-coded output is to state mobile constraints before the AI writes any layout code. Add "mobile-first responsive design" to the beginning of your prompt. This shifts the model's approach from desktop-first (build the wide layout, then adapt) to mobile-first (build the narrow layout, then expand).

Be specific about breakpoints and mobile requirements. Instead of "make it responsive," write: "Use a single column layout below 768px. Include a hamburger menu on mobile. All buttons must be at least 44px tall. Use fluid typography with clamp() for all headings." The more specific the mobile constraints in the prompt, the more reliably the AI generates correct responsive code on the first attempt.

The best approach is to skip the prompting entirely and start from a Moon template that is already responsive. Every section in the Moon gallery is built mobile-first and tested at 375px, 768px, and 1440px. When the AI adapts a responsive template, it inherits the breakpoint logic, fluid typography, and touch target sizes. It does not need to generate any of that from scratch, which eliminates the most common source of mobile failures in vibe-coded output.

Testing mobile output in your vibe coding tool

Bolt and Lovable include preview width toggles in their editor. Use them before deploying. Toggle to the mobile preview after every significant layout change, not just at the end. Problems compound: a heading overflow in the hero section is easy to fix in isolation. A heading overflow combined with a broken nav, an unscaled image, and horizontal body scroll requires debugging four issues simultaneously.

Chrome DevTools has a device toolbar that simulates any screen size. Open it with Cmd+Shift+M on macOS or Ctrl+Shift+M on Windows. Select iPhone SE (375px) or iPhone 14 Pro (393px) from the device dropdown for a realistic mobile test. This is more reliable than manually resizing the browser window because it also simulates touch events and mobile user agent behaviour.

Test at three widths as a minimum: 375px (standard phone), 768px (tablet portrait), and 1440px (desktop). The most missed breakpoint is tablet landscape at 1024px. At this width, three-column grids look sparse but have not collapsed to a single column yet. The spacing feels wrong, the cards are too wide for their content, and the page appears stretched. The auto-fit grid rule from the feature grid fix above handles this breakpoint automatically because it adjusts column count based on available width rather than fixed breakpoints.