Responsive works in browser but not on actual device

[scottmoanajones]

I’m new to webflow and have had some issues when I’m on my phone.

On desktop I can size the browser and everything seems to respond well. In the editor things look fine as well. When I actually use my phone to view the site everything is broken. I’m not sure where I went wrong or what to research. If anybody could help me find my problem I would be super grateful.

Thanks!

Here are some desktop screenshots

And here are some screen shots from my phone:

---

Here is my public share link: LINK

[Brando (Brandon Roche)]

Hi @scottmoanajones Thank you so much for posting this and Welcome to the Webflow Community.

Responsive Web Design can be tricky, so we put together this tutorial on some of the basic principals to responsive design.

In this case, it looks like this was a unique Flexbox Safari issue where your 7-Split class needed to have the flex child settings changed to flex: expand.

Please let me know if this is helpful or if you have any additional questions just tag me @Brando, I’m here to help.

[scottmoanajones]

Thanks, that’s really good to know. What’s really weird to me is that when you’re looking at in editing mode it’s ok for you but for some reason when I look at it in editing mode I can’t tell anything is wrong.

Oh I just realized what you meant, it’s because I used Chrome to do the editing that I didn’t see it. Ok that’s really helpful to understand then.

Thank you!

[Brando (Brandon Roche)]

My pleasure to help

Our team is looking into this discrepancy between Flexbox style rendering in Chrome vs Safari.