Hello! Below I have attached a photo of what my published site looks like on Safari when either view it on a mobile device/tablet, or on a smaller browser size after the “tablet media query” if you will:
You will notice that the divs containing the images (class name: photo_wrapper) disappear entirely. I have also noticed that even in the editor, there are differences in how this displays. Please refer to the photo below:
I realize this is probably a Safari/Flexbox issue, but is there a specific setting I am missing that is messing this up? Thank you in advance for any tips you may have!
Is there a live/published version of the site I may look at in order to inspect it with Firebug and such? These tools don’t work well with the site preview function of Webflow.
Hi Brian! Thank you so much for your reply to my issue. I apologize for not having posted the link to the published version already. It’s a super long and somewhat embarrassing domain, but here it is:
I have Safari, but it’s on PC and no longer updated, so coupled with no dev tools for the browser makes things a bit difficult the test. The “can I use” website states there is an issue with Flexbox:
In Safari, the height of (non flex) children are not recognized in percentages. However other browsers recognize and scale the children based on percentage heights.
I tried my best to looked @ the issue dev tools and Firebug in Firefox and Chrome as well as the Webflow editor on your share. The issue looks like it’s text related with what I saw and your screen shots of Safari/Chrome. I’d try testing min height experiments on the “photo content” in pixels, not percentages (due to the described bug in Safari) and publish look @ it and see what that gets you. If nothing good comes of that, you could look at putting a class on the h3 and/or p tag which currently don’t have any styles defined.
Awesome! Seriously thank you so much for the time you invested in looking into that for me! I will give those suggestions a shot and let you know what happens!
