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
(I read somewhere it may be related to something in webkits. But don’t know how to resolve)
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 : )
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)?
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.