Loading…
Stop horizontal scrolling on mobile by replacing fixed widths with responsive ones.
When an element is wider than the viewport, phones show a horizontal scrollbar and zoom out — a classic mobile-usability failure. The cause is almost always a fixed pixel width, an oversized image, or a wide table/code block.
width with max-width + width: 100%, and cap media with max-width: 100%.overflow-x: auto so only that element scrolls, not the page..wrap { width: 1200px; } /* overflows phones */
img { width: 800px; }.wrap { max-width: 1200px; width: 100%; }
img { max-width: 100%; height: auto; }Check page-builder rows set to fixed pixel widths and full-width images; switch them to percentage/responsive widths.
Use responsive utilities (max-w-full, w-full) and next/image for fluid media.
Run a free audit and get a prioritized fix list with auto-generated code.
Run a free audit