Grid 2.0 Only allow so many FR units wide? (screenshot)

Here is a completely empty grid and as I add columns (this example is in ‘phone landscape’ but it’s happening on all breakpoints), they stop fitting to the page width and start running off the page.

All breakpoints appear to have a point (and they’re all different) where the grid just runs off the page.

That can’t be right…can it?

By the way, I’m using Safari.


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

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.

For the grid columns:

But also for divs:

image

As soon as you start giving them content, they lose their default formatting:

image

image

Or dimension:

If you want the default column or row size to adapt, just give dimensions to the grid element to constraint its sub elements:

Wow… very thorough. Thank you.

Not to sound stupid, but how do I “give dimensions to the grid element to constrain it’s sub elements”?

1 Like

Oh, sorry, I had drawn big fat arrows on the images to make it obvious but my screen capture tool may be broken…

Setting dimensions is defining a height and/or a width. Here I set it to 100VW which is “100% of the viewport width”

So here you were supposed to understand that in the first image there’s no dimensions set, and in the second we set some dimensions:

Gotta reinstall my screencapture tool I guess :smiley:

1 Like

You are amazing. Thanks Vincent!

Edited by mod, merged two topics into one

Grid 2.0 Glitch on Different Breakpoints?

Hello!

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:

Desktop: 12 columns wide
Tablet: 8.5 columns wide (3.5 cut off)
Phone Landscape: 6.5 (5.5 cut off)
Phone Vertical: 3.5 (8.5 cut off)

Also please note, that the images are loading a bit out of sequence. Most of the “grid on” screenshots are the 3 bottom graphics.

I’m attaching screen shots to illustrate this, and I also have my “Read-Only” version below as well.


Here is my site Read-Only: https://preview.webflow.com/preview/910zen-2019-a2?utm_source=910zen-2019-a2&preview=64e085c92a4617ffa1870f75e3bfa53e

Hi @robertt8, this is expected behavior for grid items that are placed manually and not a bug :slight_smile: .

. You need to manually correct each element to fit within the viewport or set the elements to ‘auto’

Thanks Sarah!

So…this might be a dumb question, but how do I do that?

If I set elements to auto, they won’t sit where I want them. How do I correct each element to fit within the viewpoint? Is there a web video on this?

Thank you!

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 :slight_smile: .



You rule! Thanks Sarah. I’ll bug you again if I’m still too obtuse. Thanks for the help. :grinning:

Hey Sarah!

I’m still trying to wrap my head around this.

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.

What am I doing wrong here?

I was going to answer this but it seems @vincent gave you a thorough explanation already. Got to give us some time to come back and reply, it’s a Sunday here after all :wink: . I’ll merge these two topics.

Thanks Sarah, I actually was wondering if this was a different issue, which is why I opened the new thread.

Thanks for your time. You are both very helpful!

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.