Responsive Layout Auditor
Paste HTML and CSS, then list viewport widths. An isolated preview measures document width, elements crossing the viewport, and content elements whose rectangles overlap at each width. It does not fetch a live website or fully emulate a mobile device. Review overlap candidates to decide whether they are intentional.
Key features
- Measure up to six viewports from 240 to 1920 pixels
- Calculate document scroll width and horizontal overflow for each viewport
- List tags, classes, and bounds of elements outside the viewport
- Flag geometric overlap candidates among visible content elements
- Inspect an isolated HTML/CSS preview and download the results as JSON
How to use
- Paste the HTML and CSS you want to inspect, or load the fixed-width example.
- Enter comma-separated viewport widths, such as 320,390,768,1280.
- Run the audit and compare overflow and potential overlaps by width.
- Select a width to inspect the preview and individual element bounds.
- Download the JSON measurements to compare before and after your CSS change.
Use cases
- Find a fixed-width card that pushes a mobile page sideways
- Compare badge or button placement across viewport sizes
- Check a local mockup before and after a media-query change
Frequently asked questions
Does this inspect a live website URL?
No. It analyzes only the pasted HTML and CSS in a local frame. External stylesheets, images, and fonts are not fetched, so a live site's full styling may differ.
Can the pasted code run JavaScript?
No. The frame has no script permission, and a content security policy blocks script execution and remote requests. JavaScript-generated layouts are not reproduced.
How is horizontal overflow measured?
The tool compares the document scroll width with each viewport width. It also lists visible elements whose left or right edge crosses that width.
Is every reported overlap a defect?
No. It flags sufficiently intersecting rectangles of visible leaf elements. Intentional layers, transparent elements, and font differences can create false positives or omissions.
What are the limits?
Enter at most six distinct widths from 240 to 1920 pixels. Up to 500 elements are inspected, with up to 25 overflow and 25 overlap details per width.
Does the report include my HTML or CSS?
No. JSON includes widths, short element selectors, bounds, and overlap areas. IDs or class names may still be sensitive, so review the report before sharing.
Privacy
HTML and CSS remain in browser memory inside an isolated frame. Scripts, remote images and fonts, network connections, and form submissions are blocked. The downloaded JSON includes measurements, not your source code.
Comments & questions