Your website looks beautiful on a laptop. Then you open it on your phone, swipe upward—and the whole page drifts sideways. A thin strip of empty space appears at the edge. Suddenly, a polished design feels unfinished.
That sideways movement is usually a sizing problem: something is wider than the space available to it. The useful question is not “How do I hide the scrollbar?” It is “Which element stopped fitting?”
In this guide, you’ll learn how to fix horizontal scroll on mobile with seven focused CSS fixes, a small browser debugging helper, and a repeatable way to check your work. No framework required.
Quick answer: inspect the element that exceeds the viewport, then correct its width, minimum size, wrapping, or positioning. Common fixes include box-sizing: border-box, min-width: 0 on the relevant flex child, responsive media, and grid tracks that can shrink. Apply the fix that matches the cause.
Find the element before changing the CSS
Open your page in the browser’s developer tools and enable its responsive viewport. Start at 375 pixels, then try 320 and 430 pixels. These are useful test widths, not a substitute for testing on a real phone. Confirm that your document includes the viewport tag:
<meta name="viewport" content="width=device-width, initial-scale=1">If you can scroll the whole document sideways, run this read-only helper in the developer console on your own page. It lists elements whose bounding rectangles extend beyond the visible document width:
const viewportWidth = document.documentElement.clientWidth;
const candidates = [...document.querySelectorAll("body *")]
.filter((element) => {
const rect = element.getBoundingClientRect();
return rect.width > 0 &&
(rect.right > viewportWidth + 1 || rect.left < -1);
});
console.log(candidates);Click a listed element in the console to inspect it. Look at its computed width, padding, minimum width, margins, and transforms. The list contains candidates, not confirmed bugs: off-screen menus and intentionally scrollable content may appear too. Pseudo-elements are not listed separately, so inspect ::before and ::after when the obvious elements look correct.
Change one rule at a time in developer tools. When the page fits, copy that targeted change into your stylesheet. This keeps a small layout bug from becoming a stack of unrelated overrides.
WordPress example: keep a wide table inside the article
To reproduce this on a draft page, add a Table block with four columns. Enter a long filename without spaces in each column, then preview the page at 375 pixels wide. Swipe across the table and again across the paragraph below it. If only the table moves, it already handles overflow correctly. If the paragraph moves sideways too, inspect the table wrapper.
Select the Table block in List View. Under Advanced, enter cw-scroll-table in Additional CSS class(es), without a dot. Add this rule in your site’s custom CSS:
.wp-block-table.cw-scroll-table {
max-width: 100%;
overflow-x: auto;
}Preview again. You should be able to reach the last column while the paragraph below stays still. If both still move, inspect the parent column for a fixed width or a flex item that cannot shrink. Test the published layout while logged out as well, since the editor canvas can have a different width.
1. Include padding and borders inside the declared width
Imagine a panel with width: 100% and 24 pixels of padding on each side. With the default content-box sizing model, the padding is added outside that declared content width. The finished panel can become wider than its parent.
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
}Border-box makes the declared width include the border and padding. The body margin reset removes the browser’s default outer spacing; add deliberate page padding to your layout container instead. On an established project, check existing components after introducing a global sizing reset.
2. Let the relevant flex child shrink
A flex row can look flexible while one child still refuses to get smaller. A long title, file name, or URL may give that child a content-based minimum width. Setting flex: 1 alone does not always remove this limit.
.profile {
display: flex;
align-items: center;
gap: 1rem;
}
.profile__avatar {
width: 3rem;
height: 3rem;
flex-shrink: 0;
}
.profile__content {
flex: 1;
min-width: 0;
}
.profile__name {
overflow-wrap: anywhere;
}Apply min-width: 0 to the child that needs to shrink. If the layout contains nested flex rows, inspect each relevant level. Wrapping then allows the text inside that smaller box to remain readable. For navigation links or button groups, flex-wrap: wrap may be a better design choice than squeezing everything onto one line.
3. Give grid columns room to become smaller
A grid with two equal columns can still overflow when a child contains something that will not break. Using minmax(0, 1fr) lets the track shrink below its content-based minimum; the content inside still needs sensible wrapping or local scrolling.
.cards {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
}
.card {
min-width: 0;
overflow-wrap: anywhere;
}
@media (max-width: 40rem) {
.cards {
grid-template-columns: minmax(0, 1fr);
}
}The breakpoint changes the composition to one column when two cards become cramped. Choose that point by watching your own content, rather than treating a particular phone model as the boundary. A responsive layout should have enough breathing room for translated text and larger font settings too.
4. Make images and embeds respect their container
An image can arrive with a large natural width. A video or embedded frame may also carry a fixed width from copied markup. Give ordinary content images and videos a responsive limit, then use a dedicated rule for video embeds:
.article img,
.article video {
display: block;
max-width: 100%;
height: auto;
}
.video-embed {
display: block;
width: 100%;
max-width: 100%;
aspect-ratio: 16 / 9;
height: auto;
border: 0;
}Keep the image’s HTML width and height attributes when they describe its intrinsic dimensions; CSS can still scale it down. The 16:9 rule is for widescreen video frames, not every iframe. Maps, forms, and other embeds may require different height rules. Also inspect the media’s wrapper: a responsive image inside a fixed 900-pixel parent cannot repair that parent.
5. Replace accidental viewport widths with container widths
The units look similar, but 100vw and 100% answer different questions. Viewport units refer to the viewport; percentages resolve against the relevant containing block. A full-viewport child inside a padded container can extend beyond the space reserved for it. On layouts with classic scrollbars, viewport width can also include space you did not intend to occupy.
/* For an ordinary section inside the page */
.section {
width: 100%;
}
/* A centered content container */
.container {
width: 100%;
max-width: 70rem;
margin-inline: auto;
padding-inline: 1rem;
}This container relies on the border-box reset from the first fix. Keep viewport units when the design actually needs viewport sizing. The goal is to choose a width that matches the layout, rather than replace every occurrence of vw without inspection.
6. Wrap long text and scroll wide content locally
A single uninterrupted URL can behave like a rigid beam across your layout. Let ordinary prose break when necessary. Code examples and data tables need a different treatment: preserve their structure and let their own container scroll.
.article {
overflow-wrap: anywhere;
}
.article pre {
max-width: 100%;
overflow-x: auto;
white-space: pre;
overflow-wrap: normal;
}
.table-scroll {
max-width: 100%;
overflow-x: auto;
}Wrap a wide table in a container with the table-scroll class. For a keyboard-focusable scrolling region, use descriptive markup such as the following, and retain a visible focus indicator:
<div class="table-scroll" tabindex="0"
role="region" aria-label="Project comparison">
<table>
<caption>Project comparison</caption>
<!-- Add the table headings and rows here. -->
</table>
</div>A table scrolling inside its own area is intentional overflow. The whole article moving sideways is a different experience. Preserve that distinction. Avoid forcing every word to break with a blanket word-break: break-all; normal text becomes harder to read.
7. Inspect decorative layers and off-screen positioning
Sometimes the content fits perfectly, but a decorative circle sits partly beyond the page. Transforms, negative margins, absolutely positioned shapes, and pseudo-elements can extend beyond the visible design. Inspect those details before changing your main content widths.
.hero {
position: relative;
overflow: clip;
}
.hero::before {
content: "";
position: absolute;
width: 16rem;
height: 16rem;
right: -6rem;
top: -8rem;
border-radius: 50%;
background: #dbeafe;
pointer-events: none;
}Here, clipping belongs to a deliberately decorative boundary. Keep meaningful text and controls away from the clipped area. If the hero contains dropdowns, popovers, or focus outlines that need to extend outside it, put the decoration in a separate clipped layer instead. A visual flourish should never take a working control with it.
Why hiding overflow on the body is a weak first fix
Adding overflow-x: hidden to the whole page can conceal the symptom while leaving an oversized component underneath. That component may still hide text or controls. Overflow settings can also affect scrolling behavior and sticky layouts, so a global change deserves more care than a quick paste.
First correct the element’s sizing. Then use local clipping for decoration or local scrolling for content that genuinely needs it. A tidy edge is good; accessible content is better.
Check the result like a reader
After applying your fix, test narrow and wide layouts, open the mobile menu, expand accordions, and visit forms with long labels. Try a long heading and an unbroken URL. Increase text size and use keyboard navigation to make sure every control stays reachable.
Use this quick measurement as a second signal. A value above zero suggests the document still extends beyond its visible width:
const root = document.documentElement;
console.log({
viewport: root.clientWidth,
document: root.scrollWidth,
extraPixels: root.scrollWidth - root.clientWidth
});A zero result does not prove the interface is usable—clipped content can still be missing. Finish with a visual check on a real phone. Rotate it, open the navigation, and read the page from top to bottom. Test after fonts and images finish loading, because the final content can change the layout.
Frequently asked questions
Why does my website scroll horizontally only on mobile?
A fixed width, long unbroken string, minimum-sized flex child, or multi-column layout may fit on a laptop but exceed a narrow viewport. Inspect at the width where the problem first appears.
Does min-width: 0 fix every overflow bug?
No. It is useful when a flex or grid item’s minimum size prevents shrinking. A fixed-width image, translated decoration, or non-wrapping navigation needs its own correction.
Should I disable horizontal scrolling everywhere?
No. Code blocks, comparison tables, and intentional carousels can use horizontal scrolling within a clear local region. Keep ordinary page content within the viewport.
Can I use these fixes in WordPress?
Yes, but first identify the theme or block class responsible. Scope CSS to the affected component and test the change on a draft or staging page. Avoid replacing a theme’s entire stylesheet to fix one overflowing block.
Keep building with Codeweave24
Put these ideas to work in our responsive contact form tutorial, then try the HTML and CSS footer project. If the markup itself feels unfamiliar, start with our beginner’s HTML guide.
A good mobile page feels calm. Text stays within reach, cards find their place, and nothing asks the reader to wrestle with the screen. Find the element that breaks that calm, give it the right boundary, and let the rest of the design breathe.
Which element caused your overflow? Share the culprit and the fix in the comments—your stubborn layout might be the example another developer needs.
References and further reading
Technical references: MDN: box-sizing, MDN: min-width, MDN: overflow-wrap, and Chrome for Developers: CSS layouts and responsive design.
