What it is
CSS (the styling code that controls how a page looks) can size elements using either fixed units, like pixels (a box set to exactly 800 pixels wide, for example), or relative, flexible units like percentages, which adjust automatically to whatever screen the page is being viewed on. A "fixed-width element" is any part of a page — an image, a table, a container box — sized with one of those fixed pixel values rather than a flexible one.
This works fine as long as the screen is wider than that fixed value, but the moment the actual screen (a phone, in particular) is narrower than the element's fixed width, the browser has no choice but to let the page scroll sideways to accommodate it, since it can't shrink an element below its explicitly set size.
Why it matters
Horizontal scrolling is one of the most jarring, unmistakable signs of a broken mobile layout, since it forces a visitor to scroll in two directions at once just to read normally — a completely different, more frustrating browsing pattern than the up-and-down scrolling every mobile visitor expects. It usually only takes one oversized element anywhere on the page (a wide image, an embedded table, a fixed-width box) to force this behavior across the entire page, not just around that one element.
This is often a leftover from content designed for desktop use first — a table copied from a spreadsheet, or an image inserted at its original, uncompressed pixel dimensions — rather than a fundamental flaw in the overall site design.
How to fix it
- Open your site on a phone (or a narrow browser window) and check whether the whole page scrolls sideways, or find the specific section where it starts.
- Look for the specific element causing the overflow — often a wide image, an embedded table, or a box with an explicitly set pixel width in its styling.
- Replace fixed pixel widths with relative units like percentages, or add a
max-width: 100%rule so the element can never exceed the screen's actual width. - For wide tables specifically, consider wrapping them in a scrollable container limited to that one table, rather than letting the whole page scroll sideways.
- Re-check on a phone after each change to confirm the horizontal scrolling is gone.