Website modules overlapping each other on android mobiles but look fine on apple mobiles

I recently built a shopify store and have launch the site and everything worked fine. I have now found that when viewing the website on an andriod phone some of the text/images/modules look to be overlapping.

Any insights on this would be much appreciated!

1 Like

Hey @Jake6

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

Hi Moeed, the store is https://www.essencesofdlight.co.nz

Most of the issue are on the training page

Screenshots below

Thanks

1 Like

Okay so after having a look at different pages, I would say the section which you’re using isn’t suitable for mobile. You either need to change those sections completely or use different sections for mobile only. Happy to help if you need further help. Feel free to share your collaborator request code in my private messages and I’ll see what I can do.

Cheers,
Moeed

Hi,

Hope this will help

  • Ensure viewport meta tag is correct.
  • Make images scale (max-width:100%; height:auto).
  • Use friendly line-height and allow word wrap.
  • Let flex items wrap and set min-width:0.
  • Remove fixed heights/negative margins; use 100svh for full-screen.
  • Reset stacking with position:relative; z-index:0.
  • Add robust font fallbacks.