Skip to content

EDITWEAKS

EDITWEAKS | Free Updates, Reviews and Guides

Menu
  • About us
  • Contact Us
  • Privacy Policy
Menu

Fix: Disable Horizontal scroll on Blogger/WordPress mobile

Posted on by

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.

1 thought on “Fix: Disable Horizontal scroll on Blogger/WordPress mobile”

  1. Megan Kidwell says:
    November 21, 2016 at 7:53 pm

    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!!

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Recent Posts

  • 5 Best Online Betting Apps in 2020 to 2021 & 2022
  • 4 Features That the Next Generation of Social Networks Will Need to Have
  • How to Easily Update Burp suite 2.x from 1.7.x for Linux
  • How To Design Your Own Printed Circuit Board
  • FIX – Firefox Add-ons stop working on Ubuntu/Linux

Recent Comments

  1. Anonymous on How to Easily Update Burp suite 2.x from 1.7.x for Linux
  2. inalexa on Snax, the Blockchain based Social Overlay – Reviewed
  3. Anonymous on How To Root Infinix X507 Kitkat Android Smartphone
  4. Chris on Double Your Earnings! How to Generate Affiliate/Deep Link on Jumia & Konga
  5. Unknown on #Takecharge & Save the Date for New Infinix Smartphone Launching this July 2017
©2022 EDITWEAKS | Design: Newspaperly WordPress Theme