Streaming live at 10am (PST)

Trouble with flexbox styling in Safari


#1

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?


#2

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: https://cl.ly/3E3h0A1A0x0P

Hope this helps!


#3

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.


#4

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.


#5

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