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


  #1  
Old Aug 9, 2015, 06:25 PM
flyboy's Avatar
flyboy
 
115 posts · Sep 2010
How to eliminate the need for horizontal scrolling on phone browsers

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,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
  #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



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 06:28 AM.


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