Menu icon Foundation
How do I prevent Horizontal scrolling like the Foundation mobile site?

Perhaps there is something I am missing... site is salonbkb.com

On mobile there seems to be horizontal scrolling that automatically comes up on the page that allows for thumbing of the onto a white space both left and right.

I added a body width of 100% and when you first land on the page it is correct giving a fixed site. now if I zoom in and out it will allow for the scrolling to reappear again.

Foundations own site doesn't do this as you can only pinch to zoom in but it always reverts back to 100% and doesn't move otherwise.

any suggestions? thanks

mobile

Perhaps there is something I am missing... site is salonbkb.com

On mobile there seems to be horizontal scrolling that automatically comes up on the page that allows for thumbing of the onto a white space both left and right.

I added a body width of 100% and when you first land on the page it is correct giving a fixed site. now if I zoom in and out it will allow for the scrolling to reappear again.

Foundations own site doesn't do this as you can only pinch to zoom in but it always reverts back to 100% and doesn't move otherwise.

any suggestions? thanks

Christian Matthias about 5 years ago

ok I fixed it... this was the reason as i had a width and margin outside of my viewport.

took forever to find.

here is the solution that helped.

http://stackoverflow.com/questions/25099517/disable-touch-panning-for-body-of-site-on-mobile-devices

A page will not do this ordinarily if you have width=device-width, initial-scale=1. Some element is stretching the page, allowing the user to pan sideways. This will often happen if you have margins on a 100% width element, or if box-sizing is not set to border-box and there is padding on the 100% width element. You just need to find the element (chrome devtools is useful for this, keep scrolling down and try to find the one with a big border that sticks out) and modify or remove it.

By the way, I would highly recommend against setting user-scalable=no or maximum-scale=1. It's terrible for usability. Users should be able to zoom in. There are almost no good use cases for this. If you're concerned about tap delay, use fastclick.

Christian Matthias about 5 years ago

thanks for the suggestion but this is not working for me.

dims about 5 years ago

you will have to add viewport meta tag to ur html
somethin like this

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>

more information at
https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag