When an element in the Designer has a dashed outline, it usually means it’s styled by default, and that it has no content nor dimensions once published (hence being invisible on published and Preview). Webflow gives an unstyled element some default dimensions and outline for designers to be able to easily select it, fill it and style it. As soon as you’ll give those elements a dimension or a content, they’ll lose their default formatting.
So, them bleeding out of the viewport is expected, instead of wrapping when there’s no reason to.
I’m playing with a new website layout and keep running into this bizarre problem.
I usually just assume I’ve set something wrong (and perhaps I have), but when I view my grid (in the Webflow Designer) on different breakpoints, the Grid appears to go off the screen to the right, which makes it very difficult to make adjustments on various breakpoints since some are literally unreachable.
The other odd thing is when you view the site as “live”, everything appears to behave fine and NOT go off the screen, so… I’m not quite sure what’s happening.
Please note that in “Design view” the visible grid on:
Not at all @robertt8! Here’s a few videos from the webflow university to get you started. They do use the old interface but the information on adjusting for mobile is the same.
These first two videos explain the concept and the third links to different videos showing how to make a grid responsive in different situations. I suggest you start with the first one to get an idea of how this works in general .
Most of the things in the videos make total sense, but I feel like the grid should always fit to the screen size right?..even if the images don’t? In this screen shot, you can see that (even with items deleted or shrunk, the grid is still going well outside the boundaries of the screen. Again, these problems are persistent through all breakpoints but the Desktop version.