Erratic line breaks for logos inside a flex div in Safari

Design help General
1

I have a div set to Flex and filled with logos that create lines that break predictably in Chrome and Firefox. However, in Safari the lines break erratically, with several logos on one line and only one logo on the next (for example).

This 1-minute Loom demonstrates the issue: Flex Box Logo Display Issues | Loom

Any help or advice would be appreciated.

Thanks in advance.

Here is my site Read-Only: Webflow - New York Jazz Bands

2

This might help. Passed the HTML and CSS to AI for analysis.

https://www.perplexity.ai/search/i-am-having-a-layout-issue-in-7KtG09vjT8ar_RDoZ.SmkQ

1 Like
3

Thank you, Jeff.

Unfortunately, I’m really not adept when it comes to the technical stuff. I looked at the changes (actually, additions) in code that AI suggested, saw that there was no way to implement them using the style panel, tried adding them as custom code through a code embed and also by adding the custom code through the site settings, but probably did so incorrectly. The code itself just appeared on the page.

So I switched to the Thomas Edison method of just trying random things to see if one would work, and one did, so far as I can tell. That was just adding explicit dimensions to the settings of the recalcitrant logos. I only had to do a couple of them and suddenly all of them seem to fall in place now.

I’m lucky in this case that I don’t need to resize them on different breakpoints.