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 */ 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 |
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 { |
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 { HTML Code:
#breadcrumbs1 { |
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 02:50 AM. |
Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.