Mobile adoptation does not work on Iphone properly

Hello guys!
I have a website with mobile adaptation done. It looks great on my Desktop in Designer and on my android smartphone. But on the customer’s Iphone 12 pro max it looks… strange. All borders flew somewhere. SOME text fields are in strange places and some of them are in proper place. Some pictures disappered. Some of them where they should be, and some of them are not.

I tried to reDO all sizes in pixels (it was in vw and ems). Then i tried to do all in ems and put 3.2 px to body instead of 1vw… it is still somewhere in space. Then i undo everything…

Once again - android - looks great, the same is on the PC. But Iphone (using Chrome on Iphone of course) — it’s a disaster.

What is that? Why? What should i do different to avoid this?

published url
readonly link

ps. Lottie files sometimes load properly, sometimes not. on this screenshot they are broken. on my other attemps to refresh they become okay… magic outside of Hogwarts?

If you go via Iphone to the 2 page Image with Lazy load on the hero screen does not load at all on Iphone (if i mark it as Eager it starts loading). On android it loads…

What am I doing wrong? What is broken? Iphone? Webflow? Any Ideas?

1 Like

After hours… I found out that if I change Grid to Flex in Designer, text stops to fly away on Iphone… But i need grids! I want to use them!

What is broken? Web flow “grid” button, or Apple? Maybe only some parameter of Grid style makes Iphone go crazy? Can anyone explain this?

Well… the solution is to add in all grid slots a div block with “auto” in width and height. And inside them you can put anything else. In this case Iphone will show all content correctly.

I cant understand or explain this. But it is a fact :slight_smile: