Find Horizontal Overflow at a Chosen Viewport Width
A page that looks fine on a desktop can still force sideways scrolling at a phone width. Compare measured content widths with the width you are testing, and see which patterns need rework first.
1 · screen or pattern | measured content width CSS px | fixed-width elements
FIRST-LOAD
Research prototype — checkout unavailable. Input is processed locally and a draft is saved automatically in this browser profile when storage is available. Reset to sample clears that draft; Pro history has its own clear button. A state link encodes your inputs in its URL: share only non-sensitive rows. Browser history, clipboard and anyone receiving the link may retain it. Optional AI use below leaves this device; it is not required.
Data note: Everything runs in this browser tab on the reflow ruler: your screen or pattern | measured content width CSS px | fixed-width elements stays on this device, nothing is uploaded, and the reading is rebuilt only when you press run.
Perspective: Before: Shared headers and footers appear everywhere. After: the reflow ruler shows the working beside each named row so the reader can change the assumption and inspect the consequence.
2 · Read the reflow ruler
This measures user-supplied pixel widths and is not an accessibility audit or a WCAG conformance verdict. Have the repaired pattern re-tested with keyboard, zoom and assistive technology by a qualified reviewer.
Paid layer: reflow ruler print and history
one-time step · the free reading above stays complete
Free tier
- one complete reflow ruler run in the app
- three samples plus unlimited article-demo runs
- unwatermarked result text and an explicit, user-triggered state link
What $4 one-time adds
- print the reflow ruler with its row workings
- CSV of CSS px overflow and row explanations
- last five reading summaries saved in this browser profile
$4 once for repeated filing of the reflow ruler, not for a better answer. Illustrative time basis: avoiding one five-minute manual reformat per saved reading; no market-price or guaranteed-savings claim.
Local history (this device)
- No saved runs yet — your first run files here.
Checkout is unavailable until a payment link is configured. The optional unlock is browser-local, profile-scoped and best-effort, not server-verified access. Clearing browser data can remove it; there is no account or cross-device recovery.
Boundary and sources
This measures user-supplied pixel widths and is not an accessibility audit or a WCAG conformance verdict. Have the repaired pattern re-tested with keyboard, zoom and assistive technology by a qualified reviewer.
- Method: Count elements in that pattern with a hard width, minimum width or unbreakable content. Overflow with at least one such element is flagged; the sample flags the 360 px header by 40 px.
- All sample records are invented examples. The app does not fetch measurements, policies, files or personal records.
- Google’s official pricing page, fetched 2026-09-29, lists free-tier access including AI Studio. Optional formatting only; limits and availability can change. Free-tier content may be used to improve products. Never paste private records there.
Mechanism: competence-autonomy-loop
Optional AI formatting, not calculation
For this reflow ruler, use the free AI Studio interface only if available to you, with no paid API key. Manual entry completes the same workflow for free. Supply only fictional or non-sensitive notes. Review its output against the source; never paste unresolved questions into the numeric rows.
Format my non-sensitive notes for a reflow ruler. Return plain rows only: screen or pattern | measured content width CSS px | fixed-width elements. Preserve supplied quantities exactly. Do not guess missing values; list questions separately. Do not calculate or add advice. I will check every row before pasting into the local tool.
Accepted schema: screen or pattern | measured content width CSS px | fixed-width elements. No AI response is executed as code.