Need Help Fixing Grid of Collection List

Hey there,

I’m brand new to Webflow and still learning how to master Collection Lists and their layout possibilities. I’m trying to figure out how to make it so that all 8 of my elements in my “Skills” section of my About page on my portfolio are laid out in a nice 4x2 grid, but the grid is broken in both the preview section of the Designer, as well as when published on my actual website, as seen below:


Figma is next in the Collection List after Sketch, and so should automatically jump down to the next line on the left and be underneath HTML5, then follow by Illustrator, then Photoshop, then Powerpoint, right?

I found that if I zoom out my Chrome browser to 80%, rather than the default of 100%, it displays the 4x2 grid properly that I am looking for:

Is it possible to make so that this is not the only remedy though? There must be a solution that I’m still just too novice to know about.

Thanks a ton in advance,
Daniel

https://preview.webflow.com/preview/daniels-portfolio-cfe3e1?utm_source=daniels-portfolio-cfe3e1&preview=cb7df369604997ae7b328316c1e815d6&mode=preview
https://daniels-portfolio-cfe3e1.webflow.io/about

Hey Daniel, Welcome!

Can you share a read-only link to the project?

Definitely! I had included it in my original post but when I hit post it didn’t show up for some reason.

Here it is.

As you can see, I’ve been playing with the layout as well and it looks horrible at the moment unfortunately. I also can’t seem to figure out why “Section 3” won’t show up starting after Section 2 where my photo and the quote are, and rather begins at the bottom of my viewport/on top of Section 2, but perhaps that’s another question for a different post.

Thanks!

Do this for your collection list element.

That worked like a charm! THANK YOU!

1 Like