Safari Mobile/Tablet Display Issues

[Spencer_Irwin (Irwin)]

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:

Left = Safari
Right = Chrome

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!

---

Here is my public share link: https://preview.webflow.com/preview/stephanieirwinphotography?preview=b68addccac290216cedc5ac8e0402d49

[itbrian40 (Brian Harper)]

@Spencer_Irwin

Spencer,

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.

Thanks,
~B.

[Spencer_Irwin (Irwin)]

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:

http://stephanieirwinphotography.webflow.io/

Thanks for looking into this!

[itbrian40 (Brian Harper)]

No worries Spencer, I’ll let you know what I find out.

~B.

[itbrian40 (Brian Harper)]

Spencer,

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.

Good Luck!
~B.

[Spencer_Irwin (Irwin)]

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!