Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

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

How to eliminate the need for horizontal scrolling on phone browsers


  #1  
Old Aug 9, 2015, 06:25 PM
flyboy's Avatar
flyboy
 
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:
Code:
/* Fixes the horizontal-scrollbar-white-space issue created by breadcrumbs padding */
#breadcrumbs1 {box-sizing: border-box;}
Presto!

EDIT:
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.
  #2  
Old Aug 10, 2015, 12:35 AM
CrouchingBruin's Avatar
CrouchingBruin
 
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:
Code:
.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!
  #3  
Old Aug 10, 2015, 12:52 PM
juggledad's Avatar
juggledad
 
23,648 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
  #4  
Old Aug 10, 2015, 07:03 PM
flyboy's Avatar
flyboy
 
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.

Bookmarks

Tags
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 08:27 PM.


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