Streaming live at 10am (PST)

Shrunken phone view despite looking normal on designer


#1

Hello Everyone,

In the design browser when I toggle between different screen sizes, my website looks fine on both the desktop and the phone sized viewer. However, when I actually load the site on my iPhone it looks nothing like what I see in the webflow designer, everything is super tiny and aligned left. I have attached a picture below. I have now tried to play with overflow and width sizes but to no avail. Can someone please advise how to make what I see on my iPhone look like what I see in the designer?

Thank you,

Melanie

Here is my public share link: https://preview.webflow.com/preview/eyeing-the-world?preview=1143c87992c5396b2dba64feee4eb2c4
(how to access public share link)


#2

Hi @eyeingtheworld Welcome to the community! :smiley:

Can you post a new read-only link? The one you posted does not work anymore.

Thanks in advance


#3

https://preview.webflow.com/preview/eyeing-the-world?preview=4d2566c2ef417e576458ed6fa3527e24


#4

Does anyone have a suggestion for me please?


#5

Hi @eyeingtheworld, thanks for your patience. In this case, the issue is that there is overflow in the design, where there are elements extending beyond the visible area of the viewport, causing scroll from right to left and whitespace.

This translates and renders as a squished site on mobile.

The solution is to fix the overflow, which can sometimes be tricky if you have a lot of styles and overrides.

I have help to identify the biggest culprits, take a peek here:

I hope this helps, if not, let me know and I am happy to assist further.


#6

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