[RESOLVED] Pinch-Zoom Out on Mobile

I can pinch-zoom out to the point where the entire site shrinks within the browser. This should not happen. Is there a fix on the way, or am I missing a setting?

Preview Link
https://preview.webflow.com/preview/donnybrook-f90cf9?preview=663761dbd5d7356bbd4b29b32e1eb504

You’re missing a few things, actually. Your .heading .large element is too wide for the screen on mobile, so you’ve got some sidescrolling action going on. Your social container toward the bottom is doing the same thing.

Thanks for chiming in Cricitem. Are these settings causing the zoom out issue?

I don’t have any classes by the name of .heading or .large. Could you be more specific about these elements and what settings are set incorrectly? Same goes for my “Container Social” element. All these elements are set to Auto.

1 Like

Elements being wider than the viewport is what causes sidescrolling, and that is what is causing your zoom issue.

Here are two changes you can make that will fix it.

Got it! I was getting ahead of myself and previewing portrait mode before I had even adjusted settings. Thanks so much for taking the time to help!

1 Like

How do I correct that?

TDale

If you post a read-only link to your project and a screenshot of what you’re seeing, I can take a look for you. I’m heading out right now but I’ll be back in a few hours if no one else solves it for you by then.

1 Like

I don’t really know how to set the image size for this. Here’s my read-only link if that helps. (Don’t have snipping tool on this computer-my old one.)

TDale

No screen shot, (snipping tool, right?) Don’t have one on this old computer. Here’s the read-only link:

https://preview.webflow.com/preview/gsrs-homepage2?preview=7c042db92f733506ddf971c88c7d51f0 https://preview.webflow.com/preview/gsrs-homepage2?preview=7c042db92f733506ddf971c88c7d51f0

TDale

TDale, you just have to go through each device viewport mode — in order from desktop to mobile portrait — and ensure all your containers are positioned and sized properly.

I’ll try those. Thanks from a design neophyte.

TDale

Being new to this, I’m not sure what that means. If I do a heading that doesn’t work on mobile, do I need to resize it to fit mobile even if it looks puny on desktop? Need some direction…a blind guy wandering thru the technological desert.

TDale

Found it.

This element is in your navbar, and it’s got negative margins, and they are causing the left-right scrolling. Change both your margins to 0 and you’ll be good.

I remember looking at this the other day. I really think it would do you a lot of good to go through some tutorials, then start over, building this section by section. You’re using margins all over the place (both positive and negative margins) for positioning and that really isn’t what they are for.

1 Like

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