Streaming live at 10am (PST)

Flexbox border issue

Hi Guys,

I have an issue with the 6 coloured service boxes on the 2nd section down.
Initially I had them set to flexbox with their actual width set at 33.33%. This was causing issues on Safari, so I removed the percentage from the width and instead it on the flexbox child settings for class ‘Collection Item 5’. Now I’ve noticed that it’s fixed on Safari, however on Chrome and on Firefox there is a white border on the lefthand side of the first service, but not on the next row which causes it to look out of kilter! anyone have any ideas what’s wrong here?

Chrome vs Safari


Here is my site Read-Only: https://preview.webflow.com/preview/csc-security?utm_medium=preview_link&utm_source=designer&utm_content=csc-security&preview=06ec02c75b836c72b39fae8ccd3cee6e&mode=preview

Hello @Bammedia!

There’s something going on with your ‘Collection List 4’ class so that it has Flexbox and Grid properties being applied. It’s setup as a row using CSS Grid, and it’s getting that extra gap from a before pseudo element (the same gap appears after the last flex element because of an after pseudo element at the end of the row).

This fix worked for me – Try removing your ‘Collection List 4’ class from that collection list and creating a new class for the Collection List that you set to display: flex with wrapping children.

I hope that helps!

Hiye,

That is really really strange as Collection List 4 was just setup using Flex!
I did what you suggested however and it looks better now on Chrome & Safari…
Thanks for your help.

1 Like

It is really strange, but I’m glad that helped!