...
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.
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: 
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