Streaming live at 10am (PST)

Styling flex safari don't get margins

Hello! I would like to ask something, in Chrome my flex behaviour is the next one:

But, in safari:

What’s going on? Fixing safari break chrome and viceversa :frowning:

https://preview.webflow.com/preview/uxdbbackup?utm_medium=preview_link&utm_source=designer&utm_content=uxdbbackup&preview=e2726265394f4da4c9e8fbecc5102093&pageId=5f3cf1a31fc54071ce6ea662&mode=preview


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Anybody can help? :frowning_face:

Hey @Juan_Jesus_Millo, how are you doing?

Short explanation

So… what happened with your layout was kinda simple. Chrome supports gap in flexbox, Safari don’t.

Why this happened to your layout in Webflow

In the Webflow’s Designer, when you change the display property, it doesn’t clear all of the internal display properties, got it?

Ex.: You set display: grid, then inside the grid properties you define 5 columns, and finally you change the display to display: flex. Even without you seeing, the 5 columns are still defined internally in case you change it back to grid.

The fix

If you prefer using Flex:

Change you display back to display: grid, clear all of the modifications you made inside the grid properties, then change it back to display: flex. This should clear all of the margins because there will be no gap anymore. You can now set the margins to your Product Card symbol and you should be fine.

If you prefer using Grid:

Change your display back to display: grid. Select you Product Card symbol and set it’s width: auto. Done, have fun.

Have a nice day, friend! Let me know if you have any doubts or trouble.

Sorry for the delay, I couldn’t reply before, but yeah, it works!!

Thanks @gilson <3