Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

Wordpress Themes - WP Forum at BFA » WordPress Themes » Montezuma Theme »

How to eliminate the need for horizontal scrolling on phone browsers

Old Aug 9, 2015, 06:25 PM
flyboy's Avatar
115 posts · Sep 2010
Not sure if anyone noticed, but when viewing Montezuma on a narrow viewport, you can scroll to the right by 30 pixels, right past the edge of the site:

And if you do so, you can see nothing but unused blank space along the side:

Naturally, I was puzzled by this. So today I spent some time digging around to find out what the cause for this is, and how to fix it.

Turns out there is a 30 px left padding applied to the breadcrumbs and, unlike any other elements in Montezuma, breadcrumbs box is not being treated with the box-sizing: border-box; style. So any padding gets added to the existing size of the box:

The Fix
The solution is to place the following code to the top of Montezuma Options > CS Files > clearfix.css:
/* Fixes the horizontal-scrollbar-white-space issue created by breadcrumbs padding */
#breadcrumbs1 {box-sizing: border-box;}

It's curious that this bug exists, especially since Montezuma already applies this fix to every HTML element via wildcard:

Last edited by flyboy; Aug 9, 2015 at 06:46 PM.
Old Aug 10, 2015, 12:35 AM
CrouchingBruin's Avatar
299 posts · Aug 2010
Santa Monica, CA
I've noticed that before. What's even more curious, though, is that right after the rule which sets all of the elements to box-sizing is this rule:
.row, .lw { 
	-moz-box-sizing: 		content-box; 
	-webkit-box-sizing: 		content-box; 
	box-sizing: 			content-box;	
	o-box-sizing: 			content-box;
Don't know the reason for this rule, but what I've done is copy this rule to my various.css file and change content-box to border-box. This takes care of the breadcrumbs bar since it has a class of lw assigned to it, which is why border-box wasn't being applied to it. This fix doesn't seem to negatively impact anything else that I can tell.
My Montezuma-themed sites: ESHS Girls Basketball Team, Venice Hongwanji Buddhist Temple
Please consider making a donation to BytesForAll for their great themes!
Old Aug 10, 2015, 12:52 PM
juggledad's Avatar
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
I think the real cause it that once the screen gets smallre thann 767, the meny flips to the the pull down and there is a 30px left margin on the breadcrumb

HTML Code:
#breadcrumbs1 {
	padding: 				5px 0 5px 30px;
try adding this code in breadcrumbs.css so you end up with
HTML Code:
#breadcrumbs1 {
	padding: 				5px 0 5px 30px;
@media only screen and (max-width: 767px) {
  #breadcrumbs1 {
	padding: 				5px 0 5px 0px;
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
Old Aug 10, 2015, 07:03 PM
flyboy's Avatar
115 posts · Sep 2010
Thx JD, I actually like the 30px padding. I'll use the solution I posted in the original post, I like your idea of appending it to breadcrumbs.css instead of clearfix.


bugfix, viewport, white space

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Similar Threads
Thread Thread Starter Forum Replies Last Post
Lost Horizontal Scrolling Announcement with upgrade John Rowe Header configuration & styling 6 Oct 1, 2013 01:21 PM
[SOLVED] Horizontal Scrolling bswb97 Center area post/pages 5 Oct 27, 2011 09:48 PM
Problem with horizontal scrolling rcrsupport Header configuration & styling 0 Apr 13, 2010 07:16 PM

All times are GMT -6. The time now is 12:38 AM.

Powered by vBulletin® Copyright ©2000 - 2021, Jelsoft Enterprises Ltd.