Streaming live at 10am (PST)

[RESOLVED] Pinch-Zoom Out on Mobile


#1

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


#2

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.


#3

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.


#4

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.


#5

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!


#6

How do I correct that?

TDale


#7

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.


#8

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


#9

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


#10

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.


#11

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

TDale


#12

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


#13

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.


#14

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