How do I fix horizontal scrolling on mobile?
Last checked 31 Aug 2026
Short answer
Horizontal scroll on mobile almost always comes from one element wider than the viewport — a fixed-width box, an un-wrapped table, or negative margins — ask Lovable to find and fix the specific overflowing element rather than the whole page.
Find the culprit first
Horizontal scrolling is caused by at least one element exceeding 100% of the viewport width. Common offenders:
- A fixed pixel width (
w-[500px]) on a container that doesn't fit a 375px-wide phone. - A table or code block with no wrapping or scroll container.
- An image without
max-w-full. - Negative margins or
translate-xused for a desktop visual effect that pushes content off-screen on mobile. - A flex row that isn't allowed to wrap (
flex-nowrap) with too many items for a narrow screen.
Ask Lovable to diagnose, then fix
The site scrolls horizontally on mobile. Find every element wider than the viewport on the homepage and pricing page, and fix them — likely candidates are fixed widths and tables.
Lovable can inspect the rendered DOM/CSS and identify which element is overflowing, which is more reliable than guessing from the visual result alone.
Specific fixes
- Replace fixed widths with
max-w-*andw-full. - Wrap wide tables in a horizontally scrollable container (
overflow-x-auto) scoped to just the table — see /questions/how-do-i-fix-tables-on-mobile. - Add
overflow-x-hiddento the page body as a safety net, but treat it as a last resort — it hides the symptom without fixing the cause, and can clip content that should be visible. - Check any
translate,scale, orrotateCSS transforms used for desktop hover effects — they can push content outside the viewport on mobile where the same layout doesn't apply.
What usually goes wrong
- Adding
overflow-x: hiddenglobally without finding the actual cause — it stops the scrollbar but can silently cut off content you need to see. - Fixing it on one page and not testing others — the same fixed-width component might be reused site-wide.
- Not retesting after the fix on an actual phone, since browser dev tools' mobile emulation doesn't always match real device rendering exactly.
Sources
Was this answer helpful?
Related questions
- AnswerHow do I make my Lovable website look less AI-generated?Set a real colour palette, a font pairing and spacing scale up front, then ask Lovable to remove generic gradients, stock-photo hero clichés and default shadcn styling so the site reads as bespoke.
- AnswerHow do I add animations?Ask for specific, subtle animations (fade-in on scroll, hover states, a smooth page transition) rather than "add animations" generally — Lovable can use Tailwind transitions or a library like Framer Motion depending on what you need.
- AnswerHow do I improve accessibility?Ask Lovable to check colour contrast, add alt text to images, ensure keyboard navigation works, and use semantic HTML/ARIA labels — these cover most common accessibility gaps in generated sites without needing a full audit tool.
- AnswerHow do I make a sticky header?Ask Lovable to make the header `fixed` or `sticky` at the top with a defined z-index, and add top padding to the page content equal to the header's height so it isn't hidden underneath.
