Web page not working on mobile for some people

Hey guys,

I’ve received multiple emails from my clients that our Summit page Ecom 2020 Online | Just One Dime does not work on mobile. Is it because we’re using Flexbox? The issue seems to persist in the Safari browser, but on my mobile phone it works fine.

Please let me know what I should do to fix this issue, as it’s becoming increasingly urgent.

Thanks!

Josiah
Co-founder & CTO
Just One Dime


Here is my Read-Only: https://preview.webflow.com/preview/justonedime?preview=29546121628b83df97aa8d17e9094edb

Hi @jkniep

This definitely sounds odd, but, like you I was able to visit the page on multiple mobiles in Safari.

You have flexbox on all your pages. That might not be it.

Can you please provide some more details so we can see why the issue is occurring?

  • What do they mean by not working? It doesn’t load at all? What error message do they get? Can they send a screenshot of what they see, please?

  • Can they visit the products page?
    I see that you have a min-height of 0% on the body of the summit page and the products page.
    https://cl.ly/132j0b310D0G/Image%202017-11-15%20at%204.27.10%20PM.png
    Some safari versions do not like percentage values so that might be a cause. Let them test if they can see the products page. You can also try to remove the min-height value on the body and ask them to test again.

  • I also see that there’s custom code in the Head and Body of the summit page. The Javascript in the head might delay the loading of assets on the page. You can try removing it and publishing the site and testing again. Try with the other custom codes as well if that doesn’t resolve the issue.

Any information that you can provide, can help us resolve the issue faster.

Kind regards,
Anna

Hey @AnnaKelian,

Thanks for your response. Here are some screenshots of the broken page:




As you can see, the formatting is all broken. Is it broken for you as well? Or does it look normal?

I will try changing the min-height of the body and see if that works.

Thanks,

Josiah

It’s a bug with flex in ios10, updating to ios11 fix the problem. Do you use % on height in the flex box div?

The height is auto. Here is a screenshot of the settings for a flex box div wrapping the “It happens in Vegas!” area:

Hi @jkniep

Try setting your flexbox sections to display:block

CloudApp

Hope this helps :slight_smile:

Hey @PixelGeek, thanks for the suggestion. I tried that, published it, tested it in older versions of Safari, and the top sections are still broken, unfortunately. :frowning_face:

Here’s a screenshot:

I’m 90% sure the issue is only persisting on the “flex-container” element. I uploaded a screenshot of its layout above.

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.