Breadcrumbs - Not 100% width when loaded on iPhone
 

Hi, first post and I have to say great theme! I can't believe it's so feature rich and available for free! It blows the premium themes out of the water in my opinion.

I have a problem with the breadcrumbs div not completely filling the width of the screen on an iPhone. It seems to span 100% when viewed through a desktop PC browser.

http://s18.postimg.org/rs1yedfzd/mon...mb_problem.gif

Does anyone have any ideas as I have tried to look but my knowledge of CSS is sketchy!

Thanks

Just to add that a similar thing is happening in the footer area too.

Thanks

The Lazyest Stylesheet Plugin has a feature where you can have a different stylesheet for mobile devices. I don't know much about how to use that feature, though. I just let MZ do what it does on mobiles, and I'm very happy with it.

use the FireBug extension of FireFox and examine all the elements that make up the breadcrumbs and see if you can find the CSS that is causing that to happen. Took me less than two minutes to find it and figure out what is needed to change it.

Hi Juggledad,

I have just looked through the CSS provided by firebug but I have little to no knowledge of CSS and I would really appreciate it if you could let me know what to try?

Thanks!

Time to do some learning. :p

look at the CSS for the CSS selector '#breadcrumbs1 ' and then lookup the CSS (w3schools.com/css) and see what the CSS rules for that selector do.

Cool ok, thanks for narrowing it down.

So here is the firebug CSS that is applying to that div:

.sub-menu:before, .sub-menu:after, .cf:before, .cf:after, .row:before, .row:after, .row20:before, .row20:after, .row:before, .row:after, .row:before, .row:after, .row:before, .row:after, .lw:before, .lw:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}
.sub-menu:after, .cf:after, .row:after, .row20:after, .lw:after {
clear: both;
}
.sub-menu:before, .sub-menu:after, .cf:before, .cf:after, .row:before, .row:after, .row20:before, .row20:after, .row:before, .row:after, .row:before, .row:after, .row:before, .row:after, .lw:before, .lw:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}
#breadcrumbs1 {
padding: 5px 0 5px 30px;
}
.sub-menu, .cf, .row, .row20, .lw {
display: block;
min-width: 0;
}
.breadcrumbs {
color: #666666;
font-size: 13px;
}
.row, .lw {
-moz-box-sizing: content-box;
}
.row, .row5, .lw {
margin: 0 auto;
width: 960px;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
* {
-moz-box-sizing: border-box;
}

I have made bold the only part that refers to #breadcrumbs1 but the padding looks fine and nothing else is applied? I am stumped

did you try changing the padding?