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

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
Screen Shot 2020-11-10 at 3.12.24 PM

read-only mode:
Screen Shot 2020-11-10 at 3.12.38 PM

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)

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.

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?

OMG it worse!!!

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:

image

1 Like

Thank you!
I appreciate your time

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

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:

image

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.

Thank you!!!

Fixed it!!! Thank you

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 :+1:

1 Like

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

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 :webflow_heart: