Streaming live at 10am (PST)

Struggling with Flexbox Content Grid // Safari


#1

I have a collection setup in a flexbox with 4 items. On desktops, the 4 items should display in a 2x2 grid.

The page is loading perfectly fine in Chrome and Firefox, but Safari is giving me problems. No matter how I adjust the settings, Safari always shows 1 item instead of 2 on the top row.

Experts please help! I’ve tried so many different configurations with no luck. I’m sure it’s something simple I’m missing. Thank you I really appreciate the insight!

Here’s the image link: https://cdn.pbrd.co/images/HkzbjoN.jpg


Here is my site Read-Only (go to Projects page):
https://preview.webflow.com/preview/palmetto-green?preview=63b876b3c2ed5c4b0385ccf49c8d52d2

Here’s the live site:
http://palmetto-green.webflow.io/projects


#2

Any helpers able to take a look?


#3

Sure I’ll take a look for you… did you solve it yet?

Safari has been calculating flex items differently, if I’m not mistaken, you need to add flex-basis for flex items to work properly. WF doesn’t have this functionality yet. I’ll try to find workarounds.