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).
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.
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:
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.