Fix: Disable Horizontal scroll on Blogger/WordPress mobile

Some blogs have nice responsive themes or templates but they are not 100% perfect till you do some tweaking and adjustments for it to look better.

If you notice that your blog pages are scrolling to left and right with a horizontal bar like the screen shots below:

This means the website isn’t fully responsive, such horizontal scroll bar is not a nice user experience for your visitors especially those using Mobile browsers like Opera mini, Chrome, and other Android & iOS browsers. Horizontal scrolls will make scrolling difficult but I finally got a fix I used to put the pages in perfect position when scrolling.

This works for Blogger, for WordPress responsive themes all you have to do is inside your CSS.

1. On Blogger go to your Template >> Edit HTML >>
Inside the template codes , search for ==>  max-width: 100%
or Press CTRL + F to search for it quickly.
2. Now replace max-width: 100%  with the CSS codes below:

html, body {
    max-width: 100%;
    overflow-x: hidden;
}
.menu-primary-responsive-container, .menu-secondary-responsive-container  {display: none;margin: 10px;}
.menu-primary-responsive, .menu-secondary-responsive  {width: 100%;padding: 5px;border: 1px solid #ddd;}
@media only screen and (max-width: 768px)
#attribution .right {
  float: right!important;
  margin-top: -50px !important;
  margin-right: 170px;
}

3. Hit Save and check your blog pages on Mobile, the left and right (horizontal) scroll should be gone and your page will fit perfectly with your phone browser.