Responsive Design Testing: Find Overflow

Responsive design testing checks whether content and actions remain usable as the available CSS viewport changes. Start with a real task and representative content. Narrow the viewport until an item clips, overlaps, disappears or forces unintended page-level sideways scrolling; then move slightly wider and narrower to record the nearest observed fit and failure. That pair is more useful to a developer than “broken on mobile.”

Record the browser and version, site release, CSS viewport width and height, browser zoom, text size, orientation, and exact content. A failure boundary measured with one title and one zoom setting is an observation, not a universal breakpoint. This guide tests layout; the mobile website testing guide covers touch, on-screen keyboards and real-device network behavior.

1. Resize around the observed boundary. Keep the route, data and zoom constant while changing only CSS viewport width. Record both a passing and failing width, plus the exact element that fails.
2. Change the content. Try a long unbroken word or URL, a longer localized label, and realistic user-entered text. Record which value changes the result; do not publish private text in evidence.
3. Enlarge text or zoom. Retest with the browser’s text and zoom controls, and record the chosen setting. A screen-width check at default text size cannot answer what happens after enlargement.
4. Change orientation. Compare portrait and landscape at their measured CSS viewports. Describe any lost content or action, rather than treating the orientation name as a width.

Chrome Device Mode can simulate viewport dimensions and orientation, but Chrome calls it an approximation of a mobile device. A desktop resize result does not prove the same behavior on physical hardware.

For an accessibility reference, W3C’s Reflow guidance addresses vertical content at an equivalent width of 320 CSS pixels and horizontal content at an equivalent height of 256 CSS pixels, with exceptions for parts whose meaning or use requires two-dimensional layout, such as some data tables. A single resize check here is not a WCAG conformance assessment.

These invented measurements show how to describe a boundary. They are not breakpoints or test results from this site.

At the failing width, scroll the page itself sideways, then try the content region that appears wide. Record which one moves and whether a required action or text is lost. In the fictional long-word case above, page-level sideways movement with the action pushed out of view is a useful bug report. A data table that scrolls within its own region needs a separate check: can each cell be read and can the task still be completed at the recorded viewport?

Keep the content and zoom identical when comparing the recorded passing and failing widths. W3C’s Reflow explanation allows exceptions for content whose use or meaning requires two-dimensional layout; observing a scroll bar alone does not settle whether an exception applies.

Select this static template for your own report. Use a reviewed screenshot to show the two states and remove private details before sharing.

Page and release: [tested route and build]
Browser: [name and version]
Viewport: [CSS width × height, how measured]
Zoom and text size: [browser zoom; text setting]
Orientation: [portrait or landscape, if relevant]
Content: [exact safe title/label/text that triggers the issue]
Last observed fit: [CSS width and result]
First observed failure: [CSS width and result]
Expected: [content and action remain available]
Actual: [what clips, overlaps, or requires unintended sideways scrolling]
Evidence: [reviewed screenshot and steps; unknowns marked Unknown]

The cross-browser test matrix can name the environments to check, the screenshot annotator can mark and cover a reviewed image, and the reproduction guide helps turn the boundary into repeatable steps.

Published October 9, 2026. Updated October 10, 2026. The observations and report template are original teaching examples; no live URL preview or device test runs on this page.