AI-generated mobile pages overlap text: how do you test breakpoints and real content?

Reproduce overlap with real text and device width

This applies to headings covering buttons, hints obscuring fields or pages that fail only at narrow widths. Preserve the URL, viewport and text and inspect mobile viewport configuration. Include realistic long product names and mixed-language text. Short placeholders rarely expose constraints imposed by actual content.

Inspect fixed dimensions, wrapping and layout constraints

Inspect element bounds and computed styles in the browser, including parent fixed heights, grid minimum widths and no-wrap rules. Check absolute positioning outside normal flow and size changes after fonts load. Choose breakpoints where content no longer fits rather than copying widths associated with a particular device name.

Repair overflow with content-driven layout

Prefer normal flow and flexible grids, allowing appropriate shrinking and wrapping. Leave space for controls and explanations so error messages can extend the layout. If truncation is required, provide a clear way to inspect the full content; missing information is not a layout fix. Transparent overlays must not block interactive areas.

Cover long copy, zoom and interactive states

At narrow, wider-phone and desktop widths, inspect long headings and loading and error states for horizontal overflow, overlap and inaccessible controls. Increase text or page zoom and repeat checks, then click key actions. Screenshots record appearance but require bounds and interaction checks. A normal first viewport does not cover content appearing after scrolling.

This article verified no particular page and does not claim device emulation replaces all physical-device testing. Fonts and mobile browsers vary, so critical flows need real-device coverage. Layout assertions can catch known boundaries but should not encourage rigid pixel values for every element. Check readability and keyboard access after changes.