webflow · HeyBraza shows you
webflow content overflowing on mobile
HeyBraza spots the one element pushing your layout wider than the screen and points at the width or overflow setting to fix.
your webflow site looks perfect on desktop, then on a real phone the text spills off the edge or the page scrolls sideways. it's almost always one element with a fixed width, a huge image, or text that won't wrap. here's how to find the offender and contain it.
or do it yourself
- 1switch to the mobile portrait breakpoint in the top toolbar to reproduce the problem in the designer.
- 2look for any element with a fixed pixel width wider than the screen - change it to '100%', 'auto', or a max-width instead.
- 3select images and set width to 100% and max-width to 100% so they shrink with the screen.
- 4for sideways scroll, find the element sticking past the edge (often a section or div) and, as a last resort, set overflow to hidden on the body or page-wrapper.
- 5shrink oversized headings on the smallest breakpoint, since large fixed font sizes are a common overflow cause.
let HeyBraza do this with you
HeyBraza is a tiny on-screen guide that points at the right buttons and talks you through it, on windows and mac.
downloadcommon questions
why does my webflow site scroll sideways on mobile?
one element is wider than the viewport - usually a fixed-width div, an oversized image, or negative margin. find it and switch to percentage or max-width.
should i just add overflow hidden to fix mobile overflow?
only as a last resort - it hides the symptom but a sticky element elsewhere may break; better to find and resize the element that's too wide.