Sideways scrolling means one element is too wide
A horizontal scroll bar on a phone has a single cause: something in the page is wider than the screen. Finding it is faster than guessing. Open the page in a desktop browser's device view at 320 CSS pixels wide, because that is the width W3C's reflow criterion uses, and hover through the elements panel from the top down, watching for the first box that extends past the right edge. Note what it holds: a long word or web address, a table, a fixed-width image or embed, or a full-width element with padding added on top.
- Check the narrowest width first; most defects appear there.
- Write down the element, the width and what it contains.
- Do not hide the overflow on the page before you know the cause; that clips content.
A flex or grid item that will not shrink
A very common cause is a flexible layout item that holds long content. MDN explains that for flex and grid items the automatic minimum size is not zero: it comes from the specified size or the content's min-content size. A long unbroken word, address or wide table therefore stops the item shrinking, and the row overflows instead. Setting min-width to 0 on the item removes the automatic minimum so it can shrink, and making it a scroll container also gives it a zero minimum. Long strings may also need wrapping; W3C's reflow page lists a technique for long web addresses and strings of text (C33) and an advisory one for fitting images with max-width (C37). The failing example it shows is a data table that is not inside its own scrollable container.
- Add min-width: 0 to the flexible item that holds the long content.
- Let long strings break, and give media max-width: 100%.
- Put a wide table in its own scroll container so it does not widen the page.
The viewport tag and full-height sections
Without a viewport meta tag, MDN notes that some mobile browsers lay the page out in a virtual window, for example 980 pixels wide, and then shrink it, so your narrow-screen rules never apply. The recommended tag sets the width to the device width. Do not block zoom: MDN warns that disabling it prevents people with low vision from reading the page. Full-height sections have a separate trap: the plain vh and vw units currently match the large viewport, which means an expanded mobile address bar can cover the bottom of a section sized 100vh. MDN describes small (sv), large (lv) and dynamic (dv) units for this; dynamic units can resize the content while scrolling, so choose deliberately.
- Check the head of the page for the viewport tag.
- Replace a bare 100vh on a hero with a small-viewport unit where the bottom must stay visible.
- Test with the browser toolbar visible and hidden.
A check that keeps it fixed
A fix that works today can quietly break after the next content or style change. An automated screenshot check can catch that. Playwright compares a page with a stored reference image, with tolerances you set. Its documentation warns that rendering varies by operating system, browser version and settings, and recommends running the tests in the same environment where the reference images were generated. Check the same four widths each time, including 320 pixels, and measure the page's scroll width as well as comparing images.
- Store reference images with the tests.
- Use the same environment for generating and running them.
- Check the neighbouring pages that share the same styles.
What the paid job covers and how it is accepted
Our layout job (posted test price £195, untested, paid only after sign-off) takes one page or shared template and up to five named defects at four agreed widths, fixes each with the smallest change, and leaves an automated screenshot check. It is accepted when none of the named defects is present at the agreed widths, the page does not scroll sideways at 320 CSS pixels, every agreed element is still visible and usable, the check passes and fails when a defect is put back, and you sign off. It does not redesign the page. Send the page address and a list of defects with the width where each appears in your first enquiry, not credentials.
Sources and limits
- MDN: min-width Checked 2026-10-11.
- For flex and grid items the automatic minimum size is not zero but is based on the specified size or the min-content size, unless the item is a scroll container; setting min-width to 0 removes the automatic minimum.
- MDN: meta viewport Checked 2026-10-11.
- Without a viewport meta tag some mobile devices render the page in a virtual viewport wider than the screen (for example 980px) and shrink it, so media queries for smaller widths are not used; width=device-width is recommended; disabling zoom prevents people with low vision from reading content.
- MDN: CSS length (viewport units) Checked 2026-10-11.
- Small (sv), large (lv) and dynamic (dv) viewport units exist because browser interfaces expand and retract; default vh and vw units currently equal the large viewport units, so an expanded address bar can cover content; dynamic units can cause resizing while scrolling.
- W3C: Understanding 1.4.10 Reflow Checked 2026-10-11.
- Content should be usable without scrolling in two dimensions at a width equivalent to 320 CSS pixels; a data table that is not in its own scrollable container is shown as a failing example, while a table in its own scroll container is allowed; the page lists techniques C33 (allowing for reflow with long URLs and strings of text) and C37 (using CSS max-width and height to fit images, advisory).
- Playwright: Visual comparisons Checked 2026-10-11.
- toHaveScreenshot compares a page with a stored reference image; baselines depend on browser, platform and rendering, so tests should run in the environment where baselines were generated.