My site mobile version is different from Webflow mobile mock

My site looked scattered on mobile. portrait and landscape and looks way different than webflow’s version on desktop. Actual resizing the browser to fit all mobile versions displays the site perfectly but when i access it on my android it’s all messed up. I see a white space below it on portrait, the navbar positioning does not stick, and it covers the modal boxes but only one page the gallery looks good but still the margin did not sit right as it is on webflow mobile view.

Preview site: https://preview.webflow.com/preview/candorestaurant?preview=5f4ce54b2ed0673e6b817db5b24536f3
live: candorestaurant.webflow.io

i’m i doing something wrong? please help me

cc: PixelGeek, cyberdave, vincent, Arthur

Hi @brilliantlights, thanks for the post. Could you also inform, what android device do you have, and what version of Android ?

Cheers,
Dave

it’s Android 4.4.2, Injoo device

Hi @brilliantlights, the site candorestaurant.webflow.io looks completely different than the read-only link you provided.

Could you check that ? I see the published page as a restaurant page, and the preview site about something called lando

Cheers,
Dave

oh i’m so sorry, was mixed in the confusion. I have updated the link. Thanks

Thanks for the update @brilliantlights, thanks for the update. The first thing I notice, is that the site is extremely heavy, over 9MB in size.

Target size for best performance and operation should be around 1-2 mb max for mobile :slight_smile:

I am testing on an android 4.2 device and it takes a very long time to load, so it could be that page has not fully loaded on your mobile.

Second issue is that you are using fixed backgrounds for your slider, and there can be issues with that on mobile. I would recommend not to use fixed backgrounds in the slider widget.

I think that these two things are the primary reason the site is not looking so hot on that injoo mobile device, I think it just does not have the power to run a heavy site like this.

When I looked at a newer version 4.4. android phone, like galaxy S4 (which is also now pretty old) things look 100% better:

​I hope this helps. Cheers, Dave

Thank You Dave, just learnt something new today :). I’m grateful.

1 Like

@cyberdave I’ve also found that mixing Types of sizes can result in unexpected reality vs mock

e.g. using a mix of ‘px’, ‘%’, ‘vw’, ‘vh’ values
…perhaps similar to mixing imperial & metric values?

(well, that’s been my experience on iPhone 5s using Dolphin browser compared to the WF portrait mobile view)

Mike

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