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
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
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
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
Anybody can help?
Hey @Juan_Jesus_Millo, how are you doing?
So… what happened with your layout was kinda simple. Chrome supports gap in flexbox, Safari don’t.
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.
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.
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.