Sunday

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.






Why Not Share This Post? It Takes Just A Second!!


Author: Edi Dominic Ifediri

Best described as a geek with a mixture of skills in drawing comics, Content-Writing, Computing and Mobile technology, this was due to his passion for Arts and Sciences since the age of 14 that he kicked off with the mobile web. He is the Founder/Chief-Editor at EdiTweaks which had almost been noticed as one of Nigeria's Best Tech blogs
You can add me on Facebook., follow my updates on Twitter or add me to your Circles on Google+ or your Connections on LinkedIn
By the way, if your website/blog needs some tweaking, custom design or Optimization, you can Contact me here

Come on, hit us with a Comment. Love to hear what you think!

1 comment:

  1. When I use the code above, it freezes left-right scrolling on all devices, even my laptop (I have my Chrome browser smaller than full-screen so I can review text/images while I code). Is there a way to make this only apply to mobile site templates? I'm definitely a newbie at this (I just started learning to code a few weeks ago), so I'm sorry if this question seems dumb or overly-simplistic!!

    ReplyDelete


Your Comments are Welcome.
You can Use Google Account To Leave a Comment, if You don't have a Google Account, You can add only Your Name, Click COMMENT AS >> Select NAME/URL >> Put your Name, (Leave URL empty if you don't have a website) >> then Write Your Comment in the Comment box and click Publish.

If you're here to Spam, Sorry, it won't work.

Let's enjoy and have a Reasonable conversation.
Thank You.