Streaming live at 10am (PST)

Webflow collection (columns) not displaying correctly on Firefox

Hey everyone,

I’m hoping someone knows how to fix this.

On the “Explore” page of my website growthgems.co, for logged in members, I am displaying a collection. On Chrome it displays perfectly, but on Firefox the design “breaks”.

When I look in the inspector at the column class “w-col-4” for each item of the collection, replacing width: 33.33% by 33% fixes the problem. But then it breaks on Chrome as well as on mobile.

Any idea how I could fix this?

Thank you!
Sylvain


Here is my site Read-Only: Webflow - Growth Gems

Since you are not using grid or flexbox, and pasting margins everywhere to get some space between the items, it all messes up a little bit.

You could adjust your width from 33.333333333333333333333% to that:

width: calc(33.33% - 3.33px)

Let me know if it helps.

Thanks @Marius1989!

It fixed it on Firefox but then the same problem appeared on Chrome. So I used the adjustment just for Firefox:

@-moz-document url-prefix() {
.w-col-4 {
width: calc(33.33% - 3.33px) !important;
}
}

Hi @Marius1989 (or anyone else!) - hoping you can maybe help again…

I’ve added (a lot of) items to my list, and now I have other places in that list where the design “breaks” (see attached):

Only this time it breaks on both Chrome and Firefox, and I have no idea why…I played around and tried to remove margins/padding and it still “breaks” on some items.

Thanks!
Sylvain

Add to your class “resource-list” this:

 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
 justify-content: space-between;

From “resource-card”, remove padding and margin and add a width of “calc(33.33% - 10px)” to it.

You can adjust the space between the cards, by changing the px value in the calculated width.
Keep in mind, that e.g. 10px equals a space of 20px between the cards.

Final step: If needed, adjust the CSS for responsiveness.

Hope that helps.

Thanks for the prompt reply @Marius1989!

I tried your suggestion, except I had to put “calc(100% - 10px)” for the width of “resource-card”, otherwise the cards were super small in width.

Unfortunately the rows still break as you can see below. Even if I put “calc(100%)” it still breaks.

It feels like we’re close…Am I missing something?

Thanks!

You ask me, if you are missing something?

Well, let it me tell you that way.
Yeah, you indeed missing something.
You ask for help in this community, do not follow suggestions that are being made and then you are wondering why it is not working.

You completely ignored the first step of my advice.
In my initial response I told you what the actual problem is.
Then you were forced to made some hacks which led into more problems.
And that’s the reason why you want to set proper CSS as soon as you place your first div into the page.

This was my first reply. In my 2nd one, I explicitly explained you, how to implement it and you simply denied. Instead of, you claimed that there would be still problems remaining.

Sorry for being a little bit harsh, but people do help other people in the community in their spare time and it is really frustrating for us, when advices are not being implemented, the way we described.

So please:
I don’t know which adjustmens you made. Please undo them all and follow the steps I gave you in my previous answer.
This is the solution.

As Marius said, don’t use columns, use flex. Then follow his instructions.

@Marius1989 thanks for your candid feedback, and apologies for the frustration this has caused. I totally understand where you’re coming from.

Please blame this on technical ignorance. I actually tried to follow the advice, but clearly I have done it incorrectly. I think the issue might be that I added classes and properties in the head section instead of changing directly from columns to flex like @Fonsume mentioned.

I will start again and try to do it correctly. Thanks again for your time!

@Marius1989 @Fonsume

Happy to report that this worked beautifully. My mistake was that I initially added the css code you shared in the head section of the page, instead of changing it in webflow directly. Lesson learned.

Thanks so much!

1 Like