Different Preview when using Mobile

[bathtub (Jonathan)]

I am attaching some screen shots from my Moto X mobile phone as well as screen shots from preview mode in Webflow in my Chrome browser on my desktop. On my mobile phone it looks completely different than what it looks like in preview mode in webflow on my desktop. I want my mobile phone to look like preview mode. Any suggestions?

I am also attaching a screenshot from my Moto X of a screen that pops up after clicking on my home screen image to continue into the site. This happens on my desktop too. It doesn’t last long (well longer on my phone because of the connection speed) and eventually loads my home page. But it doesn’t look good and I don’t know why it’s happening to begin with.

Pic of Weblfow Preview (Mobile - Portrait)

Pic of Weblfow Preview (Mobile - Landscape)

Pic of Moto X (Portrait)

Pic of Screen that Pops Up Once You Click on Welcome Page before Home Page Appears

[thewonglv (William Wong)]

Hi @bathtub, thanks for the detailed post! Very helpful. Can you please add your read-only link so I can take a closer look? Thanks in advance!

[bathtub (Jonathan)]

https://preview.webflow.com/preview/bb-dev-001880350?preview=b35aba1e6e91f866ca07d17a1aaa51e6

[cyberdave (Dave Sloane)]

Hi @bathtub, thanks. The Moto X chrome browser is a little different than others, but I do not really know all the details of it. How some settings are configured might cause unpredictable behavior perhaps. I would check though first, that your javascript is enabled on the moto x:

JavaScript Settings - Moto X™
[Device-Specific Instructions]
If you can’t view websites or pages won’t load/render on your device, checking your JavaScript settings often helps. Our Troubleshooting Assistant can help you with other device issues if you aren’t currently using the tool.

Launch the web browser.
Select Menu Menu (located in the upper-right).
Select Settings.
From the ‘ADVANCED’ section, select content settings.
Select Enable JavaScript to enable or disable.
Note Enabled when a check mark is present.

Check that first. If that does not work, then we can check next step. Cheers, Dave

[bathtub (Jonathan)]

My Javascript is enabled. But I’m sure that wasn’t the problem because the same thing happened on my iPhone 6.

[cyberdave (Dave Sloane)]

Ok, thanks for checking that @bathtub, I will continue to investigate this and report as soon as I have some info. Cheers, Dave

[thewonglv (William Wong)]

Hi @bathtub, I took a peek at your site’s structure and noticed a few things that you will want to look into:
(1) Avoid using negative margin (see attachment)
(2) Your element with the background image has a height set to auto. This makes it as tall as the content, which is why your BG image is so large (it’s set to fill)
(3) Your site’s structure could be cleaned up to avoid some of these issues.

Can you try to make some improvements to the structure and let us know if that helps a bit? If you still feel stuck, I’m happy to take a closer look and point you in the right direction.

Cheers,
Will