horizontal overflow

Why Is My Grid Column Overflowing?

by

Grid column overflowing problems usually happen when CSS Grid columns use 1fr without minmax(0,1fr), fixed widths, long text, images, percentage columns plus gap, or missing responsive grid rules.

CSS Grid Overflow Fix

Why is my grid column overflowing?

A grid column overflowing can make a card stick out of the layout, create mobile horizontal scroll, cut off content, or make the whole page wider than the screen. The confusing part is that 1fr sounds flexible, but grid items still have automatic minimum sizes. Long text, images, fixed columns, and gaps can force a grid column wider than you expected.

CSS Fixes Responsive Fixes
  • CSS Grid
  • minmax(0, 1fr)
  • Long text
  • Mobile overflow

What the bug looks like

One grid column pushes outside the container, the last card is cut off, or the page gets horizontal scroll.

Why it happens

Grid tracks and grid items have minimum sizing behavior that can be stronger than the flexible layout you expected.

What usually fixes it

Use minmax(0,1fr), min-width:0, responsive minmax() tracks, and safe image/text rules.

Error 1

1fr columns are being pushed by long content

A grid column can overflow even with 1fr because the grid item’s automatic minimum size may be based on its content. Long text can force the column wider unless the track and item are allowed to shrink.

Broken code

1fr can still overflow 
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.card-title {
  white-space: nowrap;
}

Broken visual result

Column pushed wider
overflow
Dashboard grid

Long content makes the first column wider than expected.

VeryLongUnbreakableGridColumnTitle Stats
1fr does not automatically mean “ignore long content.”

Correct code

minmax + min-width 
.grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}

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

.card-title {
  overflow-wrap: anywhere;
}

Fixed visual result

Column can shrink
fits
Dashboard grid

The column is allowed to shrink and the content can wrap safely.

VeryLongUnbreakableGridColumnTitle Stats
minmax(0,1fr) tells the grid track it can shrink below the content’s automatic minimum.
Error 2

Fixed grid columns are too wide for mobile

Fixed grid columns can look clean on desktop and break immediately on smaller containers. If the container is narrower than the combined column widths and gaps, the grid will overflow.

Broken code

Fixed desktop columns 
.grid {
  display: grid;
  grid-template-columns: 220px 220px;
  gap: 12px;
}

Broken visual result

Fixed columns overflow
fixed width
Product grid

The columns keep desktop widths inside a smaller container.

Product Details
Fixed column widths cannot adapt when the available space gets smaller.

Correct code

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

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

Fixed visual result

Columns adapt
responsive
Product grid

The grid can reduce columns or stack before overflowing.

Product Details
Use responsive minmax() tracks instead of fixed desktop columns.
Error 3

Percentage columns plus gap are wider than the container

Two columns at 50% already equal the full container width. If you add a gap between them, the grid becomes wider than the container unless the column math accounts for the gap.

Broken code

100% + gap 
.grid {
  display: grid;
  grid-template-columns: 50% 50%;
  gap: 18px;
}

Broken visual result

Gap adds extra width
gap overflow
Two-column section

The columns already take 100%, then the gap makes the grid too wide.

Left Right
Gap is real layout space. It is added between the tracks.

Correct code

fr columns include gap better 
.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

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

Fixed visual result

Gap fits inside layout
fits
Two-column section

The columns share the remaining space after the gap is considered.

Left Right
Fractional tracks are usually safer than percentage tracks when using grid gaps.
Error 4

An image inside the grid column is wider than the column

Sometimes the grid column is not the original problem. A child image, card, table, code block, or button inside the column is wider than the column and forces the grid track to expand.

Broken code

Image forces width 
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.card img {
  width: 260px;
}

Broken visual result

Child content breaks track
wide child
Image grid

The image is wider than the grid column can safely hold.

Text
A fixed-width child can make the entire grid column overflow.

Correct code

Media respects column 
.grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.card img {
  display: block;
  max-width: 100%;
  height: auto;
}

Fixed visual result

Child content fits
safe image
Image grid

The image is constrained by the column instead of expanding it.

Text
Constrain media and other child content so it cannot force the grid track wider.
Premium pattern

A production-minded CSS Grid column pattern

A reliable grid pattern gives columns a safe minimum, allows child content to shrink, wraps long text, constrains media, and uses responsive tracks instead of fixed desktop assumptions.

Premium code

Safe responsive grid 
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: clamp(12px, 2vw, 24px);
}

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

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

.grid h3,
.grid p,
.grid a {
  overflow-wrap: anywhere;
}

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

Premium visual result

Responsive grid, no overflow
premium
Production grid

The tracks, content, media, and gap all respect the container.

Feature card LongResponsiveGridContent Image safe
Premium grid CSS does not hide overflow. It prevents the column from creating it.

Fast practical rule

If a grid column is overflowing, try grid-template-columns:minmax(0,1fr) and min-width:0 on the grid child before using overflow-x:hidden. Then check long text, images, fixed widths, and percentage columns plus gap.

Debug checklist

  • Inspect the grid columns and check whether 1fr tracks need minmax(0,1fr).
  • Add min-width:0 to grid children that contain long text or nested content.
  • Look for fixed column widths that are too large for mobile containers.
  • Avoid 50% 50% plus gap unless the gap is accounted for.
  • Check images, videos, tables, code blocks, and buttons inside the grid column.
  • Use max-width:100% on media inside grid items.
  • Use overflow-wrap:anywhere for long words, URLs, or unbreakable labels.
  • Use responsive grid tracks like auto-fit with minmax().
Best first move Replace 1fr with minmax(0,1fr) on the overflowing track.
Most common cause Long content or images force the column wider than the layout expects.
Most sneaky cause 50% 50% columns plus gap quietly become wider than 100%.
Better mindset Grid columns are flexible only when their minimum sizing rules allow them to be flexible.

Related fixes that can help

Grid column overflow often connects to grid mobile bugs, container width, text overflow, images, and horizontal scroll.

Fix CSS Grid Breaking on Mobile If your grid columns overflow only on smaller screens. Read this fix
Why is my page wider than the screen? If the overflowing grid column makes the entire page wider. Read this fix
Horizontal scroll on mobile? If the grid column creates sideways scrolling on phones. Read this fix
Why is my text overflowing outside the box in CSS? If long text or URLs are pushing the grid column. Read this fix
Fix container width problems If the parent container is part of the overflow problem. Read this fix
Why is my flexbox gap creating overflow? If you see the same width math issue in Flexbox layouts. Read this fix

Final takeaway

A grid column overflowing is usually caused by minimum sizing, not by CSS Grid being broken. The column is being forced wider by long content, fixed widths, percentage tracks plus gap, or media that does not respect the column.

Start with minmax(0,1fr) and min-width:0. Then make text, images, gaps, and responsive tracks safe. That fixes the real grid overflow instead of hiding it.

Want more fixes like this?

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

CSS Fixes All Fixes

Why Is My Flexbox Gap Creating Overflow?

by

Flexbox gap creating overflow problems usually happen when flex items use percentage widths, fixed widths, nowrap rows, large gaps, or long content without leaving space for the gap itself.

Flexbox Overflow Fix

Why is my flexbox gap creating overflow?

A flexbox gap creating overflow bug can make a layout look perfect until the gap is added. Suddenly the row becomes wider than the container, mobile horizontal scroll appears, cards stick out of the viewport, or buttons refuse to fit. The issue is usually simple: the item widths already add up to 100%, then gap adds extra space on top.

CSS Fixes Responsive Fixes
  • Flex gap
  • Horizontal overflow
  • flex-basis
  • Mobile wrapping

What the bug looks like

The flex row sticks out of its container, creates horizontal scroll, or makes the last card partially disappear.

Why it happens

The items and the gap are both contributing to the total row width, but the math does not leave room for the gap.

What usually fixes it

Let flex calculate widths, subtract the gap from flex-basis, allow wrapping, and add min-width:0 where content needs to shrink.

Error 1

Each flex item is 33.333%, then gap is added on top

This is the classic flex gap overflow mistake. Three cards at one-third each already equal 100%. Adding two gaps makes the row wider than the container.

Broken code

100% + gap 
.cards {
  display: flex;
  gap: 18px;
}

.card {
  flex: 0 0 33.333%;
}

Broken visual result

Row is wider than container
overflow
Feature cards

The cards add up to 100%, then the gap adds extra width.

Card 1 Card 2 Card 3
The gap is not free space. It counts in the final row width.

Correct code

Subtract gap from basis 
.cards {
  display: flex;
  gap: 12px;
}

.card {
  flex: 1 1 calc((100% - 24px) / 3);
  min-width: 0;
}

Fixed visual result

Gap is included in the math
fits
Feature cards

The card width leaves room for the gaps inside the same row.

Card 1 Card 2 Card 3
For three columns with two gaps, subtract the total gap before dividing the width.
Error 2

The flex row is not allowed to wrap

A row can overflow simply because it is forced to stay on one line. If the viewport becomes too narrow, the items and gaps need permission to wrap onto the next line.

Broken code

nowrap row 
.cards {
  display: flex;
  flex-wrap: nowrap;
  gap: 18px;
}

.card {
  flex: 0 0 180px;
}

Broken visual result

Cards cannot wrap
nowrap
Product cards

Fixed cards plus gap are forced into one line.

Item 1 Item 2 Item 3
The browser cannot create a second row because wrapping is disabled.

Correct code

Wrap when needed 
.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

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

Fixed visual result

Cards wrap safely
wrapped
Product cards

The row can create a new line before it overflows.

Item 1 Item 2 Item 3
flex-wrap:wrap lets the layout protect the viewport.
Error 3

Minimum widths are too large for the available space

Even with wrapping enabled, large minimum widths can make flex items overflow before they find a usable layout. This is common with cards, pricing boxes, badges, and responsive feature rows.

Broken code

Large minimum width 
.cards {
  display: flex;
  gap: 18px;
}

.card {
  flex: 1 1 0;
  min-width: 170px;
}

Broken visual result

Minimum width wins
min-width
Stats row

Each item refuses to shrink below a size that no longer fits.

Metric 1 Metric 2 Metric 3
A large minimum width plus gap can overflow even when flex-grow is enabled.

Correct code

Responsive minimum 
.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.card {
  flex: 1 1 140px;
  min-width: min(100%, 140px);
}

Fixed visual result

Minimum width respects the container
safe min
Stats row

The item minimum works with the viewport instead of fighting it.

Metric 1 Metric 2 Metric 3
Use responsive minimums and wrapping so small containers are still safe.
Error 4

Long content inside flex items refuses to shrink

Flex items can have an automatic minimum content size. Long text, nowrap labels, URLs, buttons, and badges can force an item wider than expected unless you allow it to shrink with min-width:0 and safe text wrapping.

Broken code

Text refuses to shrink 
.card {
  flex: 1 1 0;
  min-width: auto;
  white-space: nowrap;
}

Broken visual result

Content pushes the row
long text
Action row

A long label makes the flex item wider than the available space.

Start free trial now Compare all pricing plans
The content width can be stronger than the flexible width you expected.

Correct code

Shrink-safe content 
.card {
  flex: 1 1 140px;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

Fixed visual result

Content can fit
text safe
Action row

The content can wrap and the flex items can shrink safely.

Start free trial now Compare all pricing plans
min-width:0 is a small rule that fixes many flex overflow surprises.
Premium pattern

A production-minded flex gap pattern

A reliable flex gap layout lets the browser distribute space, allows wrapping, gives items a flexible basis, and protects long content from forcing overflow.

Premium code

Safe responsive flex row 
.card-row {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(12px, 2vw, 24px);
}

.card {
  flex: 1 1 min(100%, 220px);
  min-width: 0;
}

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

.card-title,
.card-text {
  overflow-wrap: anywhere;
}

@media (max-width: 520px) {
  .card-row {
    gap: 12px;
  }

  .card {
    flex-basis: 100%;
  }
}

Premium visual result

Flexible, wrapped, no overflow
premium
Responsive card row

The gap is part of the layout system, not an extra surprise.

Card one Card two Card three
Premium flexbox gap CSS is not about removing gap. It is about giving gap real space in the layout.

Fast practical rule

If flexbox gap is creating overflow, do not start with overflow-x:hidden. First check whether your item widths already equal 100%. Then allow wrapping, subtract the gap when needed, and add min-width:0 to flex items with long content.

Debug checklist

  • Check whether flex item widths already add up to 100% before the gap is included.
  • If using fixed columns, subtract the total gap from the available width.
  • Add flex-wrap:wrap when the row should adapt to smaller screens.
  • Use flexible values like flex:1 1 220px instead of rigid desktop widths.
  • Add min-width:0 to flex items that contain text, buttons, badges, or nested content.
  • Reduce large desktop gaps at mobile breakpoints or use clamp().
  • Inspect long text and nowrap labels inside the flex items.
  • Check the parent container if the whole row is wider than the viewport even before gap is added.
Best first move Temporarily remove gap. If overflow disappears, your item width math is the problem.
Most common cause Items are set to percentage widths that already total 100%.
Most sneaky cause Long content inside the flex item prevents shrinking unless min-width:0 is added.
Better mindset Gap is real layout space. Your flex item widths must make room for it.

Related fixes that can help

Flexbox gap overflow often connects to mobile horizontal scroll, container width, responsive breakpoints, flex alignment, and oversized buttons.

Why is my page wider than the screen? If the flex row makes the entire page wider than the viewport. Read this fix
Horizontal scroll on mobile? If the gap creates a sideways scroll bar on phones. Read this fix
Fix Flexbox not centering If your flex row also has alignment problems after changing gap or wrapping. Read this fix
Fix container width problems If the parent container is already too wide before flex gap is added. Read this fix
Fix responsive design not working If the flex gap only breaks below a certain screen width. Read this fix
Why is my button wider than the screen on mobile? If buttons inside the flex row are the real overflow source. Read this fix

Final takeaway

A flexbox gap creating overflow problem usually means the row width math is wrong. The items take too much space, then the gap adds extra width that the container cannot hold.

Give the gap real room. Use wrapping, flexible basis values, safe minimum widths, and min-width:0 for long content. That keeps the layout responsive without hiding the real overflow bug.

Want more fixes like this?

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

CSS Fixes All Fixes

Why Is My Website Zoomed Out on Mobile?

by

Website zoomed out on mobile problems usually happen when the browser is forced to fit a desktop-sized layout into a small phone viewport because of a missing viewport meta tag, fixed-width wrapper, wide grid, 100vw section, or mobile overflow.

Viewport Mobile Fix

Why is my website zoomed out on mobile?

A website looks zoomed out on mobile when the phone browser decides the page is wider than the screen and shrinks the whole layout to make it fit. The result is tiny text, tiny buttons, a desktop-looking page on a phone, or a layout that only becomes readable after the user manually zooms in.

Responsive Fixes HTML Fixes
  • Viewport meta tag
  • Fixed width bug
  • Mobile overflow
  • Responsive layout

What the bug looks like

The mobile page appears tiny, squeezed, or zoomed out, almost like the desktop site was pasted into a phone screen.

Why it happens

The viewport or layout width is wrong, so the browser scales the page instead of letting it flow responsively.

What usually fixes it

Add the correct viewport meta tag, remove fixed desktop widths, and fix the element causing horizontal overflow.

Error 1

The viewport meta tag is missing

This is the first thing to check when a website is zoomed out on mobile. The viewport meta tag tells the browser to use the device width as the layout width. Without it, mobile browsers may use a wider virtual canvas and shrink the page.

Broken code

Missing viewport 
<head>
  <title>My Website</title>
  <link rel="stylesheet" href="style.css">
</head>

Broken visual result

Tiny desktop page
zoomed out

Desktop layout

The browser is fitting a wide layout into a narrow phone screen.

The page looks tiny because the browser is not using the phone width correctly.

Correct code

Viewport added 
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My Website</title>
  <link rel="stylesheet" href="style.css">
</head>

Fixed visual result

Real mobile width
normal scale

Mobile layout

The layout uses the actual device width and stays readable.

The browser now understands that the phone screen is the layout viewport.
Error 2

A fixed desktop wrapper is forcing the page wide

Even with the correct viewport tag, a fixed-width wrapper can still make the website feel zoomed out on mobile. If the main container is wider than the screen, the layout cannot shrink naturally.

Broken code

Fixed desktop width 
.page-wrapper {
  width: 1200px;
  margin-inline: auto;
}

Broken visual result

Forced desktop canvas
1200px wrapper

Wide wrapper

This container refuses to become smaller than desktop width.

The wrapper is wider than the phone, so the whole layout becomes difficult to read.

Correct code

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

Fixed visual result

Fits the phone
fluid

Fluid wrapper

The container has a max width, but it can shrink on mobile.

A max-width pattern keeps desktop size without breaking mobile scale.
Error 3

The desktop grid never changes on mobile

A wide grid can make a mobile website look zoomed out because the browser is trying to keep multiple desktop columns alive inside a tiny viewport. The fix is not to shrink everything. The fix is to change the layout.

Broken code

Desktop grid only 
.cards {
  display: grid;
  grid-template-columns: repeat(3, 320px);
  gap: 24px;
}

Broken visual result

Columns stay too wide
desktop grid
Card 1

Too wide

Card 2

Too wide

Card 3

Too wide

The layout is still a desktop grid, so it behaves like a mini desktop page.

Correct code

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

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

Fixed visual result

Mobile stack
responsive
Card 1

Readable width

Card 2

Readable width

Card 3

Readable width

On mobile, the layout changes shape instead of shrinking the desktop version.
Error 4

A hidden overflow element is making the viewport wider

Sometimes the page looks zoomed out on mobile because one element is secretly wider than everything else. It may be a long line of text, an image, a table, a button, a flex row, or a section using width:100vw with extra padding.

Broken code

Overflow created 
.hero {
  width: 100vw;
  padding-inline: 32px;
}

.long-link {
  white-space: nowrap;
}

Broken visual result

Hidden wide element
overflow

Wide section

A single element is wider than the viewport and pushes the layout.

One wide element can make the whole page behave like it is larger than the screen.

Correct code

Overflow-safe 
.hero {
  width: 100%;
  padding-inline: clamp(16px, 4vw, 32px);
}

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

Fixed visual result

Viewport safe
no overflow

Safe section

The section respects the viewport and text can wrap safely.

The page keeps its normal mobile scale because no element escapes the viewport.
Premium pattern

A production-minded mobile viewport pattern

A stronger mobile layout starts in the HTML head, then uses flexible containers, safe media queries, and overflow-resistant children. The goal is simple: never make the browser choose between shrinking the page and creating sideways scroll.

Premium code

Viewport-safe system 
<meta name="viewport" content="width=device-width, initial-scale=1">

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

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

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

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

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

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

Premium visual result

Readable mobile layout
clean scale
Hero section

Fluid, readable, and not wider than the phone.

Card
Card
Premium mobile layout does not depend on browser zoom tricks. It fits because the structure is built to fit.

Fast practical rule

If your website is zoomed out on mobile, check the viewport meta tag first. Then inspect the page for anything wider than the phone: fixed containers, grids, images, text, tables, buttons, flex rows, absolute elements, and 100vw sections.

Debug checklist

  • Confirm the page has <meta name="viewport" content="width=device-width, initial-scale=1">.
  • Look for wrappers using fixed widths like width:1200px.
  • Replace fixed containers with width:min(100% - 32px, value) or max-width.
  • Check whether the mobile media query is actually firing.
  • Inspect images, videos, iframes, tables, grids, buttons, and long text.
  • Search for 100vw sections with padding that may create extra width.
  • Use min-width:0 inside flex and grid children when content refuses to shrink.
  • Use overflow-wrap:anywhere for long strings, URLs, or unbroken text.
Best first move Check the viewport meta tag before changing CSS randomly.
Most common CSS cause A fixed desktop wrapper is wider than the phone screen.
Most hidden cause A single child element creates horizontal overflow and affects the whole page.
Better mindset Do not shrink the site. Make the layout naturally fit the viewport.

Related fixes that can help

A zoomed-out mobile site usually connects to viewport, overflow, container width, responsive breakpoints, or HTML structure problems.

Why is my page wider than the screen? If the mobile page looks zoomed out because one element is wider than the viewport. Read this fix
Horizontal scroll on mobile? If the page can move sideways or has a hidden overflow bug on phones. Read this fix
Fix responsive design not working If your mobile layout is not switching at the right breakpoint. Read this fix
Fix container width problems If wrappers, sections, or content blocks are forcing desktop width on mobile. Read this fix
Fix HTML structure problems If the layout is rigid because the page is wrapped or nested in the wrong structure. Read this fix
Why is my text overflowing outside the box? If a long word, URL, or text line is pushing the mobile viewport wider. Read this fix

Final takeaway

A website zoomed out on mobile is usually not a font-size problem. It is usually a viewport or layout-width problem. The browser is trying to fit a page that behaves wider than the device.

Start with the viewport meta tag, then find the element that is forcing the page wide. Once the page respects the mobile viewport, the text, buttons, grids, and sections become readable without forcing users to pinch zoom.

Want more fixes like this?

Browse more mobile layout, viewport, and responsive debugging guides in the FrontFixer library.

Responsive Fixes All Fixes

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