Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Montezuma Theme (http://forum.bytesforall.com/forumdisplay.php?f=53)
-   -   How to eliminate the need for horizontal scrolling on phone browsers (http://forum.bytesforall.com/showthread.php?t=23259)

flyboy Aug 9, 2015 06:25 PM

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:
http://i.imgur.com/DAtYBzo.png

CrouchingBruin Aug 10, 2015 12:35 AM

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.

juggledad Aug 10, 2015 12:52 PM

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;
  }
}


flyboy Aug 10, 2015 07:03 PM

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.


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

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