Website loading differently on iOS and Android (mobile versions)

Design help General
1

Hi everyone,

Hope you are all well.

I’m having issues with my website displaying slightly differently on iOS and Android OS. I’ve attached the screenshots below. The Christmas section looks like it has moved into the navbar on Android, but the desired look I need is the one like iOS.

Especially the nav bar when opened looks glitched out on Android. But works perfectly fine on iOS. Please suggest me a solution :pray:t3:

(I read somewhere it may be related to something in webkits. But don’t know how to resolve)

Android home
Android home921×2048 67.9 KB

Android nav
Android nav921×2048 40.4 KB

iOS home.PNG
iOS home.PNG1179×2556 77.8 KB

iOS nav.PNG
iOS nav.PNG1179×2556 116 KB

2

Hey Vigy

Can you share your read-only link so we can have a look at this?

3

Sure: Webflow - Flavur

4

Hi vigy,

Depending on a device, the website will always look different. You need to understand that each device/ browser/ OS has its own features and a way to understand and display your code. I see you’re comparing Android Chrome to iOS Safari. Try to open your website on IOS chrome, that might give you some clues.

One more thing, that can help you figure this our. Webflow Designer mode adjusts to a browser, so it may look different when you open it on Safari vs Chrome. Right now when I’m checking your read-only on Chrome it looks broken. Please do the same, and try to fix it there.

I also see you have a custom navigation. Why didn’t you use a native mobile nav? It should help you get rid of some complexity, and probably fix your issue : )

By the way, if you need any further support, feel free to reach us here: Webnomads - Special Forces

5

Hi there,

Thanks for your response. I fixed the issues on chrome and now its working well on Android chrome too. But on safari iOS, its broken :frowning:

6

Thanks for sharing the read-only link.

As @Filipzal mentioned, it is right that in general, browsers can read your code differently in some cases.
Trying to visit the site on IOS chrome (as @Filipzal recommends) doesn’t give you any insights tho, because any browser on IOS is built on the same browser engine as safari. So chrome on IOS is basically Safari but with a different look. Under the hood it is the same and far away from chrome on android.

@vigy1229 Could you also share the link of the published site (.webflow.io)?

7

Hi there,

I’ve tried working on my site but this time in Chrome browser and its fixed. I realised the main issue was my layout style. The elements that were broken in the chrome version of mobile, were “fixed” position. I changed it to absolute and it worked.

Surprisingly nothing changed on Safari version of mobile. Maybe you both were right regarding the way browsers read code.

Thanks for all your help!! :smiley:

1 Like