The 14 screen widths every Droom build is tested at

Why it looks fine on your phone

You are the worst tester of your own website. First, you own one phone. Its width is the only width you ever see, and the fault might only appear 60 pixels narrower.

Second, memory. You know where the phone number is, so your thumb goes there without looking. To a stranger, a page that shifts sideways under their thumb is a site that is not working.

Width also moves on one device: turn the phone sideways, or set the text larger. That is why the gate varies screen height alongside width: layouts sized against the height of the screen break in their own way, and one fixed height hides it.

What horizontal overflow looks like to a visitor

Horizontal overflow means part of the page is wider than the screen, so the whole page slides left and right.

To the visitor it looks like one of these:

• A thin scrollbar along the bottom, or the page sliding sideways when they meant to scroll down.
• A strip of empty background down the right-hand side, as if the page has come loose.
• Headings cut off at the right edge. Long words and pasted web addresses do this constantly.
• A button or phone number off-screen, where nobody looks.

The culprit is usually one element: a price table, an image with no instruction to shrink, a section built to a fixed pixel width. So the gate names the offender: its tag, id and class, how wide it rendered and how far off the edge it sits.

The fourteen widths, and where they come from

The list is in the script, commented as real device classes measured edge to edge:

• Phones: 320, 360, 375, 390, 414 and 480 pixels.
• Small tablets and phones turned sideways: 600, 768 and 820 pixels.
• Laptops and desktops: 1024, 1280, 1440, 1920 and 2560 pixels.

320 is about as narrow as a browser gets short of a watch. At 2560 a laptop design strands its text in lines too long to read, or floats in an empty field. Both ends fail builds here.

A shorter run of four widths (320, 390, 768 and 1440) is for work in progress; a build must survive all fourteen before it goes near a customer. Each page loads once per width, so a medium site crosses a few hundred page loads on every run.

What the gate actually fails a build for

Four things stop a build, and one produces a warning:

• The page is wider than the screen. Checked at the top, middle and bottom of the scroll, because pages often come apart at a table further down.
• An individual element renders wider than the screen and hangs off one side. Layers that legitimately span the full width, like a fixed header, are allowed; genuine spill is named and fails.
• The browser logs an error. Console errors and uncaught script errors both count. A page whose script has died can look perfect and have a form that silently sends nothing.
• The page does not load at all at that size, within twenty seconds.
• Warning only: small tap targets. At 600 pixels and under, links and buttons smaller than 40 pixels in both directions are listed, since a thumb is blunter than a mouse pointer. Links inside a paragraph are exempt: a sentence is not a button.

One detail saves an afternoon: when the console error is the anonymous "failed to load resource" 404, the script checks whether the page declares an icon and, if not, says so. The browser asks for a favicon on its own and the request never shows in the page’s network activity, so the error is otherwise close to undiagnosable.

This runs on droom.ca, on every concept build in the demo shelf, and inside the client template, so a paid site is held to it from its first commit. It is also why the website builds are quoted at a fixed price: the checking is a script, not an argument about what counts as finished.

The one-minute check on your own site

You need a laptop or desktop. Nothing to install.

1. Open your homepage in a browser window, not full screen.
2. Drag the window’s right edge slowly left until it is roughly phone width.
3. Look along the bottom for a horizontal scrollbar. If there is one, or the page slides sideways when you push it, something is too wide.
4. Scroll to the bottom and check again. Overflow lower down is the common case.
5. Repeat on your two or three busiest pages.

If you find it, the fix is nearly always one element, not a rebuild. Send a screenshot of the narrow window to whoever maintains the site. If nobody does any more, start with the rescue checklist, then find out whether you hold the files anyone would need to fix it.

Or send it to me. The free Field Test is your site used the way a customer uses it, at these widths and on a real phone, with what breaks recorded on video and a fixed price to put it right.