Streaming live at 10am (PST)

Can't figure out where width is limited

Hey Guys,

I just started out a new, first project with Webflow and I’m enjoying it so far; but there is one thing I just cannot figure out.

If you take a look at this page:

The right hand side is a masonry.js layout which is intending to show 3 columns of photographs an an aesthetic way. However, something seems to be limiting the width of the containers and not allowing them to grow to accommodate the 3 tile wide layout, causing the thumbnails to overlap each other.

I’ve checked everything from the Lightbox element right the way up to the body element and I just cannot figure out what’s casing it. Everything seems to have its width set to auto with no excessive padding applied?

My read only link is below and any help would be greatly appreciated!

Thanks in advance!

Hello @Delarado

I made a small video to show you how to achieve this:

1 Like

Thanks Aaron, that’s incredibly helpful and has got me much closer to my solution.

two final things:

1- I don’t think the Webflow designer runs the masonry.js add in that I have used on this container list that optimises the grid display, so it displays differently there than it does on the real website. If I set masonry-item as width 100% as you have shown, the grid displays correctly in the designer, but the pictures are full width on the website rather than 3 columns. To work around this, I set width of masonry-item to 30%, left everything else as auto, and removed the 3 column setting under typography. The 3 column setting removal was not necessary to make the site render correctly in Firefox, chrome, and safari (it looked fine with the 30% width only) but it did make it render correctly in the designer. Do you see any issues with this approach?

To confirm:
masonry-item @1 00% and 3 column setting: Looked great in designer. Browsers showed only one picture per row at 100% width. I believe this is a quirk with masonry.js

Masonry-item @ 30% width only: Looked great in both designer and browser

2-The pictures now fill the container fully and don’t overlap each other as desired, however, I still cannot figure out why the container itself (named column) seems to be a static width. There don’t appear to be any static width settings on it, its children, or its parents. If I shrink the browser width, everything shrinks nicely and correctly - but after a certain point, it doesn’t grow any larger.

If I’d like to make it wider (So the pictures themselves are wider, even at 30% width) how would I achieve this?

Thanks so much for your fast and helpful response!

So, I think I figured this out. Everything is within a container, which is max 940px width.

I put it into a Div block instead, copied the original containers class (as it was used on other pages in the project) and then changed the width properties to make the container wider than 940px.