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:

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. This feature has been implemented on the following websites:

ChToEn.com Mobile View
MensfashionForLess.com Mobile View

Auto Width

Make sure your body tag has "width:auto" style.

Fixed Margin

In the outermost container of your website's HTML markup, which is usually the body tag (if your body tag has no margin style, check the container inside body), make sure you have fixed left margin and fixed right margin, namely your CSS declaration margin-left and margin-right should both be a fixed value like 0 or 8px or whatever. Your body tag may look like this:

Refer to the CSS declaration ul#slidingNavigation on Men's Fashion For Less - H&M Clothes or Accessories.

An Alternative: Use Padding Instead of Margin

Here's an alternative for those who don't want to use the margin style. 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!