TechnicalFix sideways scrolling and overflow on phones
Act as a senior front-end engineer. On phones, my {{tech_stack}} site scrolls sideways, or the page wobbles left and right when you swipe. It happens on {{page_or_feature}}.
Find the culprits with evidence, not guesses:
- Open the page at 360px in device mode and run a short console snippet that lists every element whose right edge passes the viewport, with its selector and width
- Hide suspects one at a time to see which removal stops the scroll
- Check on a real phone too; some causes only show up there
Likely causes for this symptom, most common first:
1. Fixed pixel widths or min-widths on containers, images, tables or embeds
2. 100vw on a full-bleed section, which includes the scrollbar width
3. Negative margins on grid rows, or a decorative glow or shape positioned past the edge
4. Long words, URLs or email addresses that can't wrap
5. Flex or grid children whose default minimum width stops them shrinking
6. Off-canvas menus, carousels or entrance animations that start offscreen without being clipped
7. Code blocks, tables and iframes without their own scroll container
Fix each at its source: max-width 100% on media, min-width 0 on flex and grid children, overflow-wrap anywhere on long strings, scroll wrappers for tables and code, and clipping on the decoration's own parent. Don't just add overflow-x hidden to the body; it hides the bug, can break sticky headers, and some phones still pan.
Check at 320, 360, 390 and 768px with no horizontal scroll at any of them, and add an automated test that fails if the page is wider than the viewport on key pages. List each culprit and its fix.