Preview and read only previews don't match actual mobile site

[JacobT (JACOB TOM)]

Hi everyone,
Still working on my first site. I’m at the stage of adjusting the layout to mobile portrait (to get the site up asap the client decided to skip the mobile landscape step.
My problem is it looks fine in preview mode AND read-only mode on my desktop computer, but when I check it on my cell phone it looks completely different.

The site is past due so any insights would be most appreciated

preview mode

read-only mode:

cell phone screengrab

here’s the read-only link
https://preview.webflow.com/preview/chasestation-d99fc90e59ad8d5b993ecebdaf?utm_medium=preview_link&utm_source=designer&utm_content=chasestation-d99fc90e59ad8d5b993ecebdaf&preview=2adbe276ffd6a89618b85977b20b8109

Thank you for your help

---

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

[JacobT (JACOB TOM)]

Here it is on my friends phone which is using the same OS as mine, but looks different. Now I really don’t know what to do.

[mikeyevin]

The Designer preview (including the read-only) is only used for developing and should only give you a rough idea of how the live site will look—always publish and test the design in a real browser.

Are you noticing the same issues when visiting chasestation-d99fc90e59ad8d5b993ecebdaf.webflow.io on your phone?

[JacobT (JACOB TOM)]

OMG it worse!!!

[mikeyevin]

I just took a peek at your read-only link and am noticing a bunch of issues (hidden overflows, negative margins, 0px line heights, etc) so I’d recommend you adjust some of these problems as it’s definitely going to negatively affect how your website is rendered:

[JacobT (JACOB TOM)]

Thank you!
I appreciate your time

[JacobT (JACOB TOM)]

Hi Mike
How did you make that link? I don’t see an option to proof on a real browser?

[mikeyevin]

Under the Publish dropdown you should see your staging URL and clicking on the small box/arrow icon will open up a new tab with the website:

Whichever page you’re on in the Designer will be the page opened up on the live website and you can choose to unpublish/republish the staging link in the same place.

[JacobT (JACOB TOM)]

Thank you!!!

[JacobT (JACOB TOM)]

Fixed it!!! Thank you

[mikeyevin]

The body element on that page (.body-8) has the overflow set to hidden:

It looks like that’s the only style being applied here so I’d recommend removing that class entirely or replacing it with the body class used on your other pages

[JacobT (JACOB TOM)]

Thanks Mike
This is my email. If it’s allowed I’d love to Venmo you a coffee.
Jacobatom@gmail.com

[mikeyevin]

Of course, happy to help!

I definitely don’t expect anything in return, but I just added my Buy Me a Coffee link to my profile here if you’re so inclined