Streaming live at 10am (PST)

Struggling with Flexbox Content Grid // Safari


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:

Here is my site Read-Only (go to Projects page):

Here’s the live site:


Any helpers able to take a look?


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.