Your page slides sideways on a phone

First, find which box is wider than the screen

If you checked your domain on kortaga.com/check, our browser check names the widest box for you; otherwise you can find it in your own browser in a minute. When everything fits, document.documentElement.scrollWidth equals clientWidth, and any element whose getBoundingClientRect().right is larger than clientWidth extends past the right edge of the viewport.

1. Open your page in a desktop browser, open Developer Tools, and narrow the viewport to a phone width such as 390px (or scroll to the far left on the page).
2. In the Developer Tools Console, run this check to list the elements whose right edge extends past the viewport:const w = document.documentElement.clientWidth; [...document.querySelectorAll('*')] .filter(el => el.getBoundingClientRect().right > w );
3. Hover or click the returned elements in the console to highlight them on the page. Usually one image, banner, header bar, or long string is responsible for the extra width.

scrollWidth can also include the width of CSS pseudo-elements such as ::before and ::after. If document.documentElement.scrollWidth is larger than clientWidth and no element appears in the list above, inspect ::before and ::after rules in your stylesheet.

Check the viewport meta tag in <head>

Without a viewport <meta> tag, narrow-screen devices render a page inside a wider virtual viewport (for example 980px) and shrink the rendered page down to fit the screen. When that happens, media queries written for narrow screens (such as 640px or 480px) never take effect.

1. Open your page's HTML (or your theme's header template) and look inside <head> for <meta name="viewport">.
2. Set its content attribute so the viewport width matches the device screen in CSS pixels:<meta name="viewport" content="width=device-width, initial-scale=1">
3. If the tag sets a fixed pixel width such as width=500, initial-scale=1 or width=600, that number acts as a minimum viewport width and forces a wider layout on narrower phones. Replace the number with width=device-width.
4. Do not add user-scalable=no. Disabling zoom prevents people with low vision from reading the page; WCAG requires at least 2x scaling, and enabling 5x zoom is best practice.

Fix the CSS on the box that overflows

Once you know which element reaches past the screen edge, match it to the cause below in your stylesheet or page builder.

1. An image or container with a fixed pixel width

1. An image file has an intrinsic pixel width defined by the image itself; without CSS, the browser displays it at that width. Give images max-width: 100% so they scale down when their container is narrower than the image, without stretching wider than their intrinsic size on larger screens:img { max-width: 100%; }
2. A block-level element such as a <div> takes up 100% of the available width of its containing block by default. If a wrapper or card has a fixed extrinsic width such as width: 720px, change width to max-width so it caps the width on desktop screens and shrinks on a phone:.wrap { max-width: 720px; }

2. Padding or borders added outside a 100% width

1. By default in the CSS box model, box-sizing is content-box: any padding or border is added outside the width you set. A box with width: 100% and padding: 20px renders 40px wider than its parent container.
2. Set box-sizing: border-box so the declared width includes the content, padding, and border together:*, *::before, *::after { box-sizing: border-box; }

3. Long words, links, or tables that cannot wrap

1. When a long word or URL sits inside a box narrower than the string, it breaks out of the box. Allow long words and links to break across lines:p, li, a { overflow-wrap: break-word; }
2. When a code block or data table needs to stay in two dimensions, put overflow-x: auto on that block or table wrapper itself so only that box gets a horizontal scrollbar when needed, instead of the whole page:pre, .table-wrap { overflow-x: auto; }

Under WCAG 1.4.10 (Reflow, Level AA), pages in left-to-right languages such as English or right-to-left languages such as Arabic should not require horizontal scrolling, except for parts of the content that require a two-dimensional layout for usage or meaning, such as a large data table. Avoid hiding the symptom by setting overflow: clip or overflow: hidden on the whole page unless the overflowing part is purely decorative: overflow: clip cuts off everything past the box's edge so visitors cannot reach it at all, and overflow: hidden still creates a scroll container that can scroll when a visitor tabs to a link inside it.

These steps follow MDN's guides on Overflowing content, Sizing items in CSS, the box-sizing and overflow-wrap properties, the viewport meta tag, Element.scrollWidth, Element.getBoundingClientRect(), and Understanding WCAG Guideline 1.4 (1.4.10 Reflow), all read 27 October 2026.

If you would rather we write it for you

If you would rather we repair the site or build a clean one-page site on your own domain, it is USD 150, live within 7 days of the day you approve the draft or every dollar back, first year of hosting included. Terms at kortaga.com/sites.