100vw bug

Why Is My Page Wider Than the Screen?

by

Page wider than screen CSS problems usually happen when one hidden element is wider than the viewport: a 100vw section, fixed-width card, grid column, image, flex row, long text, or absolute element.

Horizontal Overflow Fix

Why is my page wider than the screen?

A page becomes wider than the screen when one element quietly escapes the viewport. The annoying part is that the whole layout may look fine at first, but the browser still allows sideways scrolling because a single section, card, image, grid, button, or line of text is too wide.

CSS Fixes Responsive Fixes
  • Horizontal scroll
  • 100vw bug
  • Fixed width
  • Mobile overflow

What the bug looks like

The page has a sideways scroll bar, content feels zoomed out, or the mobile screen can slide left and right.

Why it happens

One element is wider than its parent or the viewport, even if the rest of the design looks normal.

What usually fixes it

Replace fixed widths with fluid widths, avoid unsafe 100vw, allow grid/flex items to shrink, and wrap long content.

Error 1

width:100vw creates horizontal overflow

A full-width section often looks harmless, but 100vw can be wider than the visible content area. When the page has a vertical scrollbar, 100vw may include that scrollbar width and push the layout sideways.

Broken code

Unsafe viewport width 
.hero {
  width: 100vw;
  padding: 24px;
}

Broken visual result

Leaking past the screen
100vw section

This strip is wider than the visible screen.

overflow →
The section is wider than the real content area, so the page can scroll sideways.

Correct code

Safe full width 
.hero {
  width: 100%;
  max-width: 100%;
  padding: 24px;
}

Fixed visual result

Fits the viewport
Safe section

The element respects the available width.

Use width:100% for normal full-width sections inside the page flow.
Error 2

A fixed-width element is too wide for mobile

A desktop card, modal, table, button, image, or pricing box can keep a fixed width on mobile. Once that width is larger than the screen, the entire page becomes wider too.

Broken code

Fixed desktop width 
.pricing-card {
  width: 420px;
  padding: 24px;
}

Broken visual result

Card is wider than mobile
Pricing card

This card keeps a desktop width and escapes the viewport.

overflow →
The browser expands the scrollable page width to fit the oversized card.

Correct code

Fluid max width 
.pricing-card {
  width: min(100%, 420px);
  padding: 24px;
}

Fixed visual result

Card shrinks safely
Pricing card

The card can be 420px on desktop but shrink on mobile.

width:min(100%, 420px) keeps the design responsive without losing the desktop max width.
Error 3

Grid columns are wider than the screen

CSS Grid can create overflow when columns are fixed or when grid items refuse to shrink. The fix is usually to use responsive columns and allow content to shrink with minmax(0,1fr).

Broken code

Fixed grid columns 
.cards {
  display: grid;
  grid-template-columns: repeat(3, 220px);
  gap: 24px;
}

Broken visual result

Grid escapes viewport
One
Two
Three
overflow →
Three fixed columns cannot fit inside a narrow mobile screen.

Correct code

Responsive grid 
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 24px;
}

.cards > * {
  min-width: 0;
}

Fixed visual result

Grid adapts
One
Two
Three
Four
The grid can collapse into fewer columns instead of forcing the page wider.
Error 4

Long text, URLs, or code do not wrap

Sometimes the layout is fine, but one long string forces overflow. This happens with URLs, code snippets, email addresses, product names, buttons, file paths, and long words.

Broken code

No wrapping 
.content-title {
  white-space: nowrap;
}

Broken visual result

Text forces overflow
SuperLongProductNameWithoutSpacesThatBreaksThePage
overflow →
The text refuses to wrap, so the page becomes wider than the screen.

Correct code

Safe wrapping 
.content-title {
  overflow-wrap: anywhere;
  min-width: 0;
}

Fixed visual result

Text wraps safely
SuperLongProductNameWithoutSpacesThatBreaksThePage
overflow-wrap:anywhere prevents one long string from controlling the whole page width.
Premium pattern

A production-minded anti-overflow pattern

A stronger layout pattern does not hide overflow as the first move. It prevents overflow by using safe wrappers, fluid widths, shrinkable grid/flex children, wrapping text, and media-safe containers.

Premium code

Safe responsive system 
html,
body {
  max-width: 100%;
}

.page-section {
  width: 100%;
  max-width: 100%;
  padding-inline: clamp(16px, 4vw, 32px);
}

.wrapper {
  width: min(100%, 1120px);
  margin-inline: auto;
}

.card,
.media,
.button,
.input {
  max-width: 100%;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 24px;
}

.grid > *,
.flex > * {
  min-width: 0;
}

.long-content {
  overflow-wrap: anywhere;
}

Premium visual result

No hidden page leak
Fluid card
Safe grid
Text wraps
No overflow
Premium overflow prevention means every child is allowed to fit before you need emergency fixes.

Fast practical rule

If your page is wider than the screen, search for the element that sticks out. Open DevTools, inspect wide sections, check fixed widths, replace unsafe 100vw, add min-width:0 to grid or flex children, and make long text wrap.

Debug checklist

  • Temporarily add * { outline: 1px solid red; } in DevTools to spot the leaking element.
  • Check if any section uses width:100vw instead of width:100%.
  • Look for fixed widths on cards, buttons, images, modals, tables, and containers.
  • Make large elements fluid with width:min(100%, value) or max-width:100%.
  • For CSS Grid, avoid fixed mobile columns and use minmax(0,1fr) or responsive columns.
  • For Flexbox, check flex-wrap, gap, flex-basis, and min-width:0.
  • Wrap long URLs, code, and product names with overflow-wrap:anywhere.
  • Inspect absolute or decorative elements positioned outside the viewport.
  • Avoid using overflow-x:hidden as the only fix unless you already found the real cause.
Best first move Find the exact element causing overflow before changing global CSS.
Most common cause A fixed desktop width surviving on mobile.
Most sneaky cause width:100vw on a page that already has a vertical scrollbar.
Better mindset Do not hide the symptom first. Remove the leak from the layout.

Related fixes that can help

If your page is wider than the screen, the root cause is often a known overflow, container, responsive, or text wrapping problem.

Horizontal scroll on mobile? If the page slides sideways mostly on phones, start with the mobile overflow fix. Read this fix
Fix container width problems If wrappers, max-width, padding, or desktop containers are making the page too wide. Read this fix
Why is my text overflowing outside the box? If one long word, URL, line of code, or button label is forcing horizontal overflow. Read this fix
Fix responsive design not working If the whole mobile layout still behaves like a desktop page. Read this fix
Fix CSS Grid Breaking on Mobile If a grid is pushing the page wider than the viewport. Read this fix
Fix Flexbox not centering If the overflow comes from a flex row, alignment, fixed basis, or child sizing issue. Read this fix

Final takeaway

A page wider than the screen is almost always caused by one element that is wider than its parent or the viewport. The whole site feels broken, but the real bug is usually a single fixed width, unsafe 100vw, grid column, flex row, image, absolute element, or long unwrapped text.

Do not start by hiding horizontal overflow everywhere. Find the leaking element first, make it responsive, and then use global overflow rules only as a last protective layer.

Want more fixes like this?

Browse more CSS and responsive debugging guides in the FrontFixer library.

Responsive Fixes All Fixes

Why Does My Layout Shift by 1px at Certain Screen Widths?

by

A layout shift by 1px in CSS usually happens when the browser is forced to round fractional pixels, handle scrollbar width, calculate flexible columns, or switch between responsive rules at certain screen widths.

Responsive CSS Fix

Why Does My Layout Shift by 1px at Certain Screen Widths?

A layout shift by 1px can be hard to notice, but easy to feel. A card looks slightly off. A header no longer lines up with the content. A full-width section creates a tiny horizontal jump. The layout is not completely broken, but it feels unstable. The cause is usually CSS sizing math: 100vw, scrollbars, subpixel rounding, padding, borders, Grid, Flexbox, or a breakpoint that changes too much at once.

Browse All Fixes Explore CSS Fixes
  • 1px layout shift
  • Responsive CSS bug
  • Visual debugging

What the bug looks like

A container, card, navigation, button group, image area, or header moves slightly when the screen width changes.

Why it happens

CSS often calculates fractional widths, but the screen still has to paint real pixels. That conversion can expose tiny alignment issues.

What fixes it

Use safer width rules, stabilize scrollbars, apply consistent box sizing, and make Grid or Flexbox layouts more forgiving.

The FrontFixer visual rule for this bug

A 1px layout shift is easier to understand when you compare the code with what actually happens on the page. So this fix uses the same pattern for every common cause: first the broken code, then the broken visual result, then the corrected code, then the corrected visual result.

Use this mental model when debugging: the browser is not moving things randomly. Something in your CSS is creating a slightly different measurement than you expected.

Error 1

Using 100vw when the page needs 100%

One of the most common causes of a tiny layout shift is using width:100vw on a section that should simply follow the normal page width. On desktop, 100vw can include the scrollbar area. That means the section may become slightly wider than the content area.

Broken code

100vw trap 
.hero { width: 100vw; margin-left: calc(50% - 50vw); padding: 64px 24px; } .container { max-width: 1120px; margin: 0 auto; }

Broken visual result

Section is too wide
Hero uses 100vw The section pushes slightly outside the normal page alignment.
The section looks almost correct, but it is wider than the content area.

Correct code

Safer width 
.hero { width: 100%; padding: 64px 24px; } .container { width: min(100% - 32px, 1120px); margin-inline: auto; }

Fixed visual result

Section is aligned
Hero uses normal flow The section now follows the same width system as the rest of the page.
The content edge and section edge now agree with each other.
Error 2

Forgetting box-sizing:border-box

Another common cause of small layout movement is the box model. If you give an element a width and then add padding and border, the final rendered size can become larger than expected. Sometimes the overflow is obvious. Other times it starts as a tiny visual mismatch.

Broken code

Width plus padding 
.card { width: 300px; padding: 24px; border: 1px solid #ddd; }

Broken visual result

Card becomes wider
Card width is not what you expected Padding and border are added on top of the declared width.
This can make one card appear slightly wider than the others.

Correct code

Stable box model 
*, *::before, *::after { box-sizing: border-box; } .card { width: 300px; padding: 24px; border: 1px solid #ddd; }

Fixed visual result

Card stays inside
Card size is predictable Padding and border are included inside the declared width.
The card now follows a more predictable sizing system.
Error 3

Letting Grid and Flexbox fight fractional pixels

Grid and Flexbox distribute available space. If the available width does not divide cleanly, the browser has to decide where the leftover pixel goes. That is why one column, tab, or button can sometimes look one pixel wider or slightly off.

Broken code

Tight grid math 
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; } .card { min-width: auto; }

Broken visual result

One column feels off
With tight spacing, fractional distribution becomes visually easier to notice.

Correct code

Safer grid 
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .grid > * { min-width: 0; }

Fixed visual result

Grid feels stable
The grid has more predictable tracks and children are allowed to shrink.
Error 4

Making breakpoints too jumpy

Sometimes the 1px shift is not really a rounding issue. It is a breakpoint issue. The layout changes at a specific width, and that change makes the page look like it jumped. This is common around widths like 1366px, 1280px, 1024px, or any custom breakpoint.

Broken code

Jumpy breakpoint 
.container { max-width: 1200px; padding-inline: 32px; } @media (max-width: 1366px) { .container { max-width: 1180px; padding-inline: 31px; } }

Broken visual result

Breakpoint jump
1367px
1366px
The layout changes too much right when the viewport crosses the breakpoint.

Correct code

Fluid container 
.container { width: min(100% - 32px, 1200px); margin-inline: auto; }

Fixed visual result

Smooth resizing
1367px
1366px
One clear formula creates a smoother transition between screen widths.
Error 5

Ignoring scrollbar appearance and disappearance

A layout can shift when the vertical scrollbar appears or disappears. This often happens when a modal opens, content loads, tabs switch, accordions expand, or a page changes from short to scrollable. The content area becomes slightly different, and centered elements can appear to move.

Broken code

No scrollbar stability 
html { overflow-y: auto; } .modal-open { overflow: hidden; }

Broken visual result

Scrollbar changes width
Centered content moved The available page width changed when the scrollbar appeared or disappeared.
The layout may jump even when your container CSS looks correct.

Correct code

Stable gutter 
html { scrollbar-gutter: stable; } /* Test browser support for your audience. */

Fixed visual result

Scrollbar space is reserved
Content stays stable The browser keeps space for the scrollbar, reducing horizontal jumps.
This can help when the shift happens because scrolling state changes.

Fast practical rule

If your layout shift is only 1px, do not patch it with margin-left:-1px or random transforms first. A tiny visual bug usually has a tiny math cause: 100vw, scrollbar width, fractional columns, box sizing, padding, borders, or a breakpoint that changes the layout too sharply.

How to debug the exact layout shift

Start by resizing the browser slowly. Watch the exact width where the layout shift appears. If it happens around a breakpoint, inspect the media query. If it happens when the page becomes scrollable, inspect scrollbar behavior. If it happens across many widths, look for fractional Grid, Flexbox, or percentage math.

Then inspect the element that moved. Check its computed width, margin, padding, border, transform, and parent container. The goal is to find which measurement changed by that tiny amount.

Temporary debug CSS

Debug only 
* { outline: 1px solid rgba(255, 0, 0, 0.15); } html, body { overflow-x: clip; }

Use outlines temporarily to see which element is wider or misaligned. Remove debug outlines before shipping the page.

Debug checklist

  • Check whether any section uses width:100vw when width:100% would be safer.
  • Check if the layout shifts when the vertical scrollbar appears or disappears.
  • Add box-sizing:border-box globally if the project does not already use it.
  • Inspect the exact viewport width where the 1px shift starts.
  • Look for media queries that change padding, gap, max width, or column count at that width.
  • Check if Grid columns use plain 1fr where minmax(0,1fr) would be safer.
  • Add min-width:0 to flex or grid children that contain long content.
  • Avoid fragile combinations of calc(), percentage widths, borders, and fixed gaps when the layout must align perfectly.
  • Test common desktop widths like 1366px, 1440px, and 1920px.
  • Do not hide the problem with random negative margins unless you have identified the real cause.
Best first move Replace unnecessary 100vw usage with 100% and retest.
Most common false fix Adding margin-left:-1px without understanding why the layout moved.
Most overlooked cause Scrollbar width changing the available content area.
Better mindset A 1px layout shift is usually a sizing-system problem, not a random browser attack.

Related fixes that can help

If your 1px layout shift is part of a wider responsive or overflow issue, these FrontFixer guides are the next places to check.

Fix container width problems If your page feels too wide, too narrow, or misaligned between sections. Read this fix
Fix overflow causing horizontal scroll If the 1px issue is actually a hidden overflow problem on mobile or desktop. Read this fix
Fix CSS Grid breaking on mobile If fractional columns, rigid tracks, or long content are making the grid unstable. Read this fix

Final takeaway

A layout shift by 1px at certain screen widths usually comes from CSS sizing math. The most common causes are 100vw, scrollbar width, subpixel rounding, fractional Grid or Flexbox distribution, padding, borders, and breakpoint rules that change too much at once.

Start with the simple checks: avoid unnecessary 100vw, use box-sizing:border-box, stabilize your container formula, inspect breakpoints, and reduce layout pressure inside Grid and Flexbox. Once the sizing system becomes predictable, the tiny 1px shift usually disappears.

Want more fixes like this?

Explore the full FrontFixer fixes library and keep debugging with practical guides built for real front-end layout problems.

Browse All Fixes Explore CSS Fixes
“`

Horizontal Scroll on Mobile? Fix the Hidden CSS Bug

by

Horizontal scroll on mobile usually means one hidden element is wider than the viewport. The page may look mostly fine, but one card, image, table, grid child, flex row, long string, or 100vw section can silently make the entire layout slide sideways.

Mobile Overflow Fix

Horizontal Scroll on Mobile? Fix the Hidden CSS Bug

Horizontal scroll on mobile is one of the most frustrating CSS bugs because the whole page feels broken even when only one element is guilty. This guide shows how to find the real overflowing element, why overflow-x:hidden can hide the symptom, and how to fix the actual width problem with safer CSS.

Browse Responsive Fixes Browse All Fixes
  • Mobile overflow debugging
  • 100vw and fixed width issues
  • Grid, flex, image and table fixes

What the bug looks like

The page moves left and right on mobile, a bottom scrollbar appears, or the right edge of the layout feels slightly cut off.

Why it happens

At least one element is demanding more width than the viewport can provide, so the document becomes wider than the screen.

What fixes it

Find the widest element, remove the rigid width, let children shrink, wrap long content, and only use clipping when it is intentional.

The simple rule behind horizontal scroll on mobile

Browsers do not create horizontal scroll randomly. If a page scrolls sideways, the document is wider than the viewport.

The hard part is that the guilty element is often not obvious. It may be a hidden row, a wide image, a table, a pre block, a grid item, a flex child, an iframe, or a wrapper using 100vw.

The fastest fix is not to hide the scrollbar first. The fastest fix is to identify which element is wider than the screen and repair that specific width behavior.

Error 1

A fixed-width element is wider than the phone

This is the most direct cause. A card, banner, image, button group, or wrapper has a fixed width that looks fine on desktop but becomes wider than the viewport on mobile.

Broken code

Fixed width 
.card {
  width: 420px;
}

Broken visual result

Card is wider than the viewport
420px card This card forces the document to become wider than the phone.

Correct code

Fluid width 
.card {
  width: 100%;
  max-width: 420px;
}

Fixed visual result

Card respects the viewport
Fluid card The card can shrink on mobile while keeping a max size on desktop.
Error 2

100vw creates extra width

width:100vw looks like the obvious way to make a full-width section, but it can cause horizontal overflow when the element also has padding, sits inside a wrapper, or interacts with scrollbar width.

Broken code

100vw trap 
.hero {
  width: 100vw;
  padding-inline: 24px;
}

Broken visual result

100vw plus padding can overflow
100vw section Width plus padding pushes beyond the safe layout area.

Correct code

Use container width 
.hero {
  width: 100%;
  padding-inline: 24px;
}

Fixed visual result

Section respects its parent
100% section The section now follows the parent width instead of forcing viewport math.
Error 3

Flex children refuse to wrap or shrink

A flex row can silently make the page wider when children have fixed widths, long text, or no wrapping behavior. This is common with buttons, cards, nav pills, and tag lists.

Broken code

No wrapping 
.button-row {
  display: flex;
  gap: 12px;
}

.button {
  min-width: 180px;
}

Broken visual result

Flex row is too wide
Button180px
Button180px
Button180px

Correct code

Wrap and shrink 
.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.button {
  flex: 1 1 140px;
  min-width: 0;
}

Fixed visual result

Flex row wraps safely
ButtonFlexible
ButtonFlexible
ButtonFlexible
Error 4

CSS Grid columns demand too much width

A grid can create horizontal scroll when columns, gaps, or minmax() values require more space than mobile can provide. The fix is often reducing track pressure.

Broken code

Rigid grid 
.cards {
  display: grid;
  grid-template-columns: repeat(3, 150px);
  gap: 16px;
}

Broken visual result

Grid demands too much space
Card150px
Card150px
Card150px

Correct code

Mobile grid 
.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.card {
  min-width: 0;
}

@media (max-width: 768px) {
  .cards {
    grid-template-columns: 1fr;
  }
}

Fixed visual result

Grid fits mobile width
Card oneFull width
Card twoFull width
Card threeFull width
Error 5

Long text, URLs, or code cannot break

A single unbroken string can create mobile horizontal scroll. This often happens with long URLs, file paths, code snippets, labels, product names, and generated IDs.

Broken code

No wrapping 
.title {
  white-space: nowrap;
}

Broken visual result

Text refuses to wrap
SuperLongUnbrokenURLOrCodeStringExample One line can push the page wider.

Correct code

Safe wrapping 
.title,
.url,
.code-label,
.long-text {
  overflow-wrap: anywhere;
}

Fixed visual result

Text can break safely
SuperLongUnbrokenURLOrCodeStringExample The string stays inside the card.
Error 6

A table or code block is too wide

Some content should scroll horizontally inside its own wrapper instead of forcing the entire page to scroll. Tables and code blocks are the classic examples.

Broken code

Page-level overflow 
table {
  width: 480px;
}

Broken visual result

Table widens the whole page
Name
Status
Action
Layout
Broken
Fix

Correct code

Local scroll 
.table-wrap {
  max-width: 100%;
  overflow-x: auto;
}

.table-wrap table {
  min-width: 480px;
}

Fixed visual result

Only the table wrapper scrolls
Name
Status
Action
Layout
Fixed
Safe

Fast practical rule

Horizontal scroll on mobile is almost always caused by one bad actor. Do not hide the scrollbar first. Find the widest element, then fix that element’s width, wrapping, or shrink behavior.

Recommended baseline

Mobile overflow foundation

This baseline does not replace real debugging, but it prevents many common mobile overflow problems. 

html,
body {
  max-width: 100%;
}

.container {
  width: min(100%, 1200px);
  margin-inline: auto;
  padding-inline: 16px;
}

img,
video,
iframe {
  max-width: 100%;
  height: auto;
  display: block;
}

pre,
code {
  max-width: 100%;
  overflow-x: auto;
}

.flex-child,
.grid-child {
  min-width: 0;
}

.long-text,
.url,
.label {
  overflow-wrap: anywhere;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
}

Why this baseline helps

It keeps containers fluid width:min(100%, 1200px) prevents desktop widths from forcing mobile overflow.
It makes media behave Images, videos, and iframes stop forcing their natural width onto the page.
It lets children shrink min-width:0 is often the missing piece inside grid and flex layouts.
It handles ugly real content Long URLs, code labels, and generated strings can break safely instead of pushing the viewport.

Debug checklist

  • Open DevTools and test the exact mobile width where the page starts sliding sideways.
  • Look for any element extending beyond the right edge of the viewport.
  • Inspect cards, wrappers, images, tables, iframes, code blocks, nav rows, and button groups first.
  • Search for hard widths such as width:420px, min-width:500px, or width:100vw.
  • Check grid and flex children for missing min-width:0.
  • Check whether long text needs overflow-wrap:anywhere.
  • Wrap tables and code blocks in containers with overflow-x:auto when local scrolling is appropriate.
  • Use a temporary outline to reveal the element that is wider than the viewport.
  • Avoid using overflow-x:hidden until you know what is overflowing.
Best first move Slowly shrink the viewport in DevTools and watch which element crosses the right edge first.
Most common false fix Adding overflow-x:hidden to the body before identifying the actual overflowing element.
Most overlooked cause Grid and flex children often need min-width:0 before they can truly shrink.
Better mindset The page is usually not broken everywhere. One hidden element is usually poisoning the whole mobile layout.

Useful debug trick

Temporary outline

A temporary outline can reveal which element is wider than the viewport. Remove it after debugging. 

* {
  outline: 1px solid rgba(255, 0, 0, 0.18);
}

Why this trick works

Many overflow bugs are visually subtle. A single card may extend only a few pixels past the viewport, but that is enough to create sideways scroll.

The outline makes the invisible boundary visible. It is noisy, but it often finds the bug faster than guessing.

When overflow-x:hidden is acceptable

It can be acceptable when you intentionally want to clip decorative elements, animated shapes, or harmless visual effects that extend outside the viewport.

But it should not be your first fix for unknown horizontal scroll. If a real component is overflowing, hiding it can create hidden content, clipped menus, or accessibility issues.

Use clipping carefully

Last resort 
body {
  overflow-x: hidden; /* only after you know why */
}

.decorative-background {
  overflow: hidden; /* safer when intentionally scoped */
}

When CSS Grid is the real problem

If the horizontal scroll appears inside a card layout, the grid may be demanding too many columns, too much minimum width, or too much gap for mobile.

In that case, read Why is my CSS Grid breaking on mobile?.

When responsive design is the bigger problem

If several sections break at once, the issue may be a weak responsive foundation: fixed containers, missing viewport setup, rigid media, and bad breakpoint logic.

In that case, read Why is my responsive design not working?.

When container width is the real cause

Some pages scroll sideways because a wrapper or section uses a fixed width, wrong max-width, or width logic that ignores the viewport.

If the problem starts at the container level, read Fix container width problems.

When flex items refuse to shrink

A flex item can force horizontal scroll when it holds long content or fixed-width children and refuses to shrink inside the available space.

If that sounds familiar, read Fix flex item shrinking with fixed width.

FrontFixer Live Inspector

Test the horizontal scroll bug before applying the fix.

Before copying a CSS patch into a real project, paste a small version of the broken layout into the FrontFixer Live Inspector. You can preview the overflow, compare the behavior on desktop, tablet, and mobile, and confirm whether the issue comes from fixed widths, 100vw, long content, grid tracks, or flex children that refuse to shrink.

The inspector is browser-only, no-AI, no-server, and rule-based, so it works best as a safe testing area before you move the final code into WordPress, a theme, or a production component.

Open Live Inspector Browse all fixes

Related fixes that can help

If horizontal scroll is one symptom of a bigger layout issue, these FrontFixer guides are the next places to check.

Fix CSS Grid breaking on mobile Use this when grid columns, gaps, or grid children are pushing the page wider than the viewport. Read this fix
Why is my responsive design not working? Use this when multiple parts of the page fail on mobile, not only one overflowing element. Read this fix
Fix container width problems Use this when the wrapper, section, or page container is wider than the screen. Read this fix

Final takeaway

Horizontal scroll on mobile is usually not a mysterious page-wide failure. It is usually one element demanding more width than the viewport can give.

Find the widest element first. Then fix the real cause: rigid widths, 100vw, unwrapped flex rows, aggressive grid tracks, long content, fixed media, tables, or code blocks.

Once the hidden overflowing element is fixed, the whole mobile layout usually feels stable again.

Need more mobile layout fixes?

Browse responsive fixes or jump back to the full FrontFixer library to keep debugging faster.

Responsive Fixes All Fixes