Different output on real iphone

[Yannick_Duguay]

Hi i am using Flexbox instead of grids and i’v got an issue when i test my website on my iphone on the latest version of Safari (IOS 10.2.1). On the left it’s what weblow shows on the Iphone view, everything is fine here but on the right it’s an actual screen capture from the webpage as seen on my iphone 5S. I’m thinking Flexbox might be the issue but i guess that since it’s ok in the browser it should be fine on IOS too. Any idea?

Here is the link to read-only website: Webflow - La Tour Prisme (the page i got problems with is the Testimonials page)

[vincent (Vincent Bidaux)]

It could be an issue with Safari.

Can you test:

• on Chrome iOS
• on Safari on desktop, reducing the window as much as you can and see if it does the same thing

[Waldo (Waldo Broodrÿk)]

Hi @Yannick_Duguay could you please update your post with some more information so we can help you faster? Things like your read-only link really help us to help you faster

How to share a read-only link:

Share a read-only link | Webflow University

Thanks in advance!

It looks like you may have a flex setting that needs to be adjusted on one element to resolve the issue.

[Yannick_Duguay]

The problem is the same in Chrome in IOS and yeah i got the same problem on Safari on OSX Sierra 10.12.2 when i shrink the page. Everything is fine in Firefox and Chrome on Sierra though…

[Waldo (Waldo Broodrÿk)]

@Yannick_Duguay thanks so much for updating your post! I hopped in and opened the Read-Only link of your site in Safari as it was a flexbox Safari based issue.

You had your “wrap- testi page testi 25” class with a flex child flex basis setting of 25%.

Changing that style to “Flex Expand” for the mobile landscape viewport resolves the issue as you can see here:

​Please let me know if this solves the problem, if not, I’m happy to help further

[Yannick_Duguay]

Oh thank you, still learning Flexbox. Looks so easy in the tutorials but there is still a little learning curve.

Have a nice day!