Flexbox in safari

Hi Guys,

So unsure if related to my previous issue, but I had flexbox working fine previously in Safari, then amended the sizing of the boxes to what you see. I’m sure its a basic setting ive misunderstood, but can you direct me to sorting this, so the boxes appear like they do in chrome? if there is a superior way to get the centre box in the centre (rather than using -margin, i’m all ears).

Thanks for all your help.

Kind regards

Mubin


Public link: https://preview.webflow.com/preview/ciptex-sub?preview=1da0fa2448613683da6987737f24cc95

Hi @mubin thanks so much for posting this!

It looks like the issue is coming from using the Container element and applying flexbox styles to it.

Can you try using a div block instead with the same class and adding the children element from your container to it and styling the new div.

That should resolve the issue.

Set your flexi-p class to have a left and right margin of “auto” (click into the field and type auto), a width of say, 100% or 90% and a max-width of 960px.

Centering your “Flex-m” element you will need to set it to absolute position, remove the top margin you have on it. Set it to top, and 50% from the top.

Give it auto margin on left and right.

Then add a y-transform of -50% to center it vertically.

Please let me know if you have any questions :smiley:

2 Likes

Hi Waldo!

I’m also having issues with flexbox, but in Internet Explorer. Should I drop the flexbox to make it work?
I posted a topic on the forum, but haven’t got any help there yet, so I’m hoping maybe you have the opprotunity to have a quick look at it?
Here’s the link to my post on the forum:

Hey Waldo,

That sorted me right out! Works great in safari now. cheers buddy!
Would the y transform have issues in any of the main browsers?

Great help W,

Kind regards

Mubin

Hi @Sven_Erik_Slattedale, great question. Yes, I think only latest versions of edge has support for flexbox, see here: Can I use... Support tables for HTML5, CSS3, etc

If IE is expected to be a heavy usage of the site, then I would recommend normal div block/display/position styling instead of Flexbox.

I hope this helps!

1 Like

Hi Cyberdave!
Thank yo so much for your help! I did try it out in edge too, and it looked just as bad there… so I decided to just remove all flexboxes on the entire page and just use div block/display/position styling… and problem was solved.
There’s a lot of people using IE and edge and also Firefox in Norway (Firefox also have some issues with flexbox sometimes), so I think I’ll just use div block/display/position styling from now on, so I don’t have to redo everything all the time.

Thank again! I really appreciate it!

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.