Trouble with flexbox styling in Safari

[Cricitem (webTAC | Technology Apprenticeship Center)]

Chrome:

Safari:

http://gm62017.webflow.io/location-page
https://preview.webflow.com/preview/gm62017?preview=d4b03906da8965ebd6ec9d5c996aba39

I’ve dealt with this before and I think there’s some tinkering with the CSS I have to do to make it work, but there’s no way a person on a webflow hosting plan can do that. Is there any chance of getting webflow to output the correct CSS prefixes for flexbox to work properly in Safari?

[Brando (Brandon Roche)]

Hi @Cricitem

Thanks for posting.

Safari doesn’t always display Flex settings correctly. But it’s easily fixed by opening the Designer in Safari.
Check out this quick video I made showing how to resolve this: Screen Recording 2017-06-23...

Hope this helps!

[Cricitem (webTAC | Technology Apprenticeship Center)]

I am so confused.

I was able to make those changes in Chrome. Why would I have to open the designer in Safari to do that?

Also, I switched the header element to block instead of flex, but now I am at a complete loss for why the city-desc element is displaying at 100% width.

I’ve decided that Safari is the new IE.

[cyberdave (Dave S.)]

Hi @Cricitem, you can also make the changes in Safari, it is just easier to see the issue if you open the designer in Safari as browsers do not always render styles the same way.

I was having a little problem finding the city-desc element, could you take a screenshot of that?

Thanks in advance.