Follow this Blog!

Nov 26, 2016

f Comment

CSS: How to Remove Your Website's Left and Right Margin for Mobile View so Visitor Can Only Scroll Vertically on Mobile Devices?

Amazon When you develop the mobile view for your website, you don't want the user to be able to scroll horizontally. You just want the user to scroll down or up, not scroll left or right. You use the correct viewport meta tag which looks something like this:

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

But when you render your website on, say, an iPhone, you see that there's still a way for you to touch scroll to the left in such a way that your website's right edge leaves the screen's right edge and bounces back when released. This is undesired and you want to fix it so that your website does not bounce horizontally when rendered on a mobile device like iPhone or iPad or Android tablet.

Read on to see how to fix it so that your website's visitor can only scroll up and down and cannot scroll left or right.

Zero Margin

In the outermost container of your website's HTML markup, which is usually the body tag (if your body tag has no margin, check the container inside body), make sure you have zero left margin and zero right margin, namely your CSS declaration margin-left and margin-right should both be 0. Refer to the CSS declaration ul#slidingNavigation on Men's Fashion For Less - H&M Clothes or Accessories.

Use Padding Instead

If you must have left margin or right margin for your outermost container, change CSS declaration margin-left and margin-right to the following CSS declaration:

padding-left:[whatever value you want]
padding-right:[whatever value you want]

And add the following CSS declaration:

-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;

Refer to the CSS declaration homepageBlock on Men's Fashion For Less.

Questions? Let me know!
Please leave a comment here!
One Minute Information - by Michael Wen
Find Michael on Google or Facebook
ADVERTISING WITH US - Direct your advertising requests to Michael