Making V0 apps fully responsive across all screen sizes

Why V0 apps break on smaller screens

V0 generates layouts optimized for the preview panel width, which is typically a desktop viewport. The AI frequently uses fixed pixel widths (w-[800px]), multi-column grids without mobile fallbacks (grid-cols-4 without the sm: prefix), and text sizes that overflow on narrow screens. Tailwind CSS uses a mobile-first approach where unprefixed classes apply to all screen sizes and larger breakpoints override them — but V0 often writes desktop-only classes without mobile defaults. The result is layouts that look polished in V0's preview but overflow, overlap, or become unusable on phones and tablets.

• V0 uses fixed pixel widths (w-[800px]) instead of responsive fluid widths (max-w-4xl w-full)
• Grid layouts use desktop column counts without mobile breakpoint fallbacks (grid-cols-4 instead of grid-cols-1 md:grid-cols-2 lg:grid-cols-4)
• Text sizes and padding are set for desktop without smaller-screen overrides
• Navigation menus lack mobile hamburger/sheet alternatives
• Images and media overflow their containers on small screens due to missing max-w-full or object-fit classes

Error messages you might see

Before you start

• A V0 project that looks correct on desktop but breaks on mobile or tablet viewports
• Access to V0's resizable preview pane or browser DevTools responsive mode
• Basic understanding of Tailwind CSS responsive breakpoint prefixes

How to fix it

<div className="grid grid-cols-4 gap-6">
  {items.map(item => <Card key={item.id} />)}
</div>

<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 md:gap-6">
  {items.map(item => <Card key={item.id} />)}
</div>

<div className="w-[1200px] mx-auto p-8">
  <div className="w-[800px]">
    <h1 className="text-5xl">Welcome</h1>
  </div>
</div>

<div className="max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8">
  <div className="max-w-3xl">
    <h1 className="text-3xl sm:text-4xl lg:text-5xl">Welcome</h1>
  </div>
</div>

<nav className="flex items-center gap-6 p-4">
  <Link href="/">Home</Link>
  <Link href="/about">About</Link>
  <Link href="/products">Products</Link>
  <Link href="/contact">Contact</Link>
</nav>

"use client"
import { useState } from "react"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"
import { Menu } from "lucide-react"
const links = [
  { href: "/", label: "Home" },
  { href: "/about", label: "About" },
  { href: "/products", label: "Products" },
  { href: "/contact", label: "Contact" },
]
export function Navbar() {
  const [open, setOpen] = useState(false)
  return (
    <nav className="flex items-center justify-between p-4">
      <span className="text-lg font-bold">Logo</span>
      {/* Desktop nav */}
      <div className="hidden md:flex items-center gap-6">
        {links.map(l => <Link key={l.href} href={l.href}>{l.label}</Link>)}
      </div>
      {/* Mobile nav */}
      <Sheet open={open} onOpenChange={setOpen}>
        <SheetTrigger asChild className="md:hidden">
          <Button variant="ghost" size="icon"><Menu /></Button>
        </SheetTrigger>
        <SheetContent side="right">
          <div className="flex flex-col gap-4 mt-8">
            {links.map(l => (
              <Link key={l.href} href={l.href} onClick={() => setOpen(false)}>{l.label}</Link>
            ))}
          </div>
        </SheetContent>
      </Sheet>
    </nav>
  )
}

Complete code example

1import Image from "next/image"
2import { Button } from "@/components/ui/button"
3
4export function ResponsiveHero() {
5  return (
6    <section className="relative overflow-hidden">
7      {/* Background image */}
8      <div className="absolute inset-0">
9        <Image
10          src="/hero-bg.jpg"
11          alt=""
12          fill
13          className="object-cover"
14          priority
15          sizes="100vw"
16        />
17        <div className="absolute inset-0 bg-black/50" />
18      </div>
19
20      {/* Content */}
21      <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
22        <div className="py-20 sm:py-28 lg:py-36">
23          <h1 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold text-white max-w-3xl">
24            Build faster with AI-powered development
25          </h1>
26          <p className="mt-4 sm:mt-6 text-base sm:text-lg text-gray-200 max-w-xl">
27            Transform your ideas into production-ready apps
28            in minutes, not months.
29          </p>
30          <div className="mt-6 sm:mt-8 flex flex-col sm:flex-row gap-3 sm:gap-4">
31            <Button size="lg" className="w-full sm:w-auto">
32              Get Started
33            </Button>
34            <Button
35              size="lg"
36              variant="outline"
37              className="w-full sm:w-auto text-white border-white hover:bg-white/10"
38            >
39              Learn More
40            </Button>
41          </div>
42        </div>
43      </div>
44    </section>
45  )
46}

Best practices to prevent this

• Always write mobile-first: unprefixed Tailwind classes for mobile, then sm:, md:, lg: for larger screens
• Replace all fixed pixel widths with max-w utilities combined with w-full for fluid responsiveness
• Use responsive text sizes (text-2xl md:text-4xl) so headings do not overflow on small screens
• Ensure all interactive elements (buttons, links, inputs) have at least 44x44px touch targets on mobile
• Add a mobile navigation menu using shadcn Sheet or a collapsible dropdown — never just hide links on small screens
• Test at 375px (iPhone SE), 768px (iPad), and 1280px (laptop) as minimum breakpoint checks
• Use responsive padding (px-4 sm:px-6 lg:px-8) to give more content room on smaller screens
• Apply flex-col on mobile and flex-row at larger breakpoints for button groups and horizontal layouts

Still stuck?

Copy one of these prompts to get a personalized, step-by-step explanation.

Related error patterns

Explore related guides

Guides from other topics that help with this issue