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.
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.
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.
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.
@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!
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.