My skill = Noob
I did a side-by-side comparison on the latest Chrome & Safari browsers on an large monitor. When I design on either browser, things get messed up on the other one.
Please share some of the guidelines that you guys follow?
My Screenshots: Chrome (Left), Safari (Right)
Chrome Left Safari Right | SooMitt | Flickr>
Chrome Left Safari Right Designer | SooMitt | Flickr>
Share Link: https://preview.webflow.com/preview/soomitt-crafted?preview=cacbd900896f8873f2262da9f1572118
Hi there @soomitt. Welcome to the community! 
Instead of using the dynamic list layout setting, try using flexbox instead. Here is a blog post I created for this issue:
Hope this helps
Thanks @PixelGeek for the tip. I followed the tutorial, flexbox is easy to get familiar with. But, for some reason I cannot get Safari to act the way I want. Chrome is okay, and so is Firefox. I hope I’ll figure it out somehow.
soomit for safari I found you really needed to be specific giving divs widths, making sure all the sections were 100VW or 100% Other browsers seem to intuitively grasp the design better or something Safari needs to be told exactly what to do and for mobile safari seems to work best without flexbox. By changing the the flex to display block. I still find I fight with responsiveness a fair bit and haven’t come up with 100% fool proof plans plus with new browsers there always seem to be little tweaks.
I’ve found the step that gets missed with Flex Box (and Safari is the one browser that suffers) is the parent element must have “Wrap Children” checked.
Flex Box makes it possible to do many layouts without “Wrap Children” checked and they’ll work in most instances. If something gets weird in Safari, the first thing I do is check that I’m telling those items to wrap.
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.