@media mobile style overriding regular settings

HTML & CSS
1

greetings all!

I have this css for general page layout:

.lev2 #content {padding-left: 175px;margin-botton:0;padding-bottom:0;margin-top:3px;}

and this for mobile:

@media only screen and (min-width:640px) {
#nav-top-menu {display:none !important;}
.lev2 #content {padding:0; margin-top:-10;}
.portfolio-slideshow {margin:-10px 0 0 0;}
}

@media only screen and (max-width:640px) {
#per-page-widget {display:none;}
.lev2 #content, .lev1 #content {padding:0; margin-top:-10;}
.portfolio-slideshow {margin:-10px 0 0 0;}
#content .entry-content {padding:0;}
}

link to the dev page is: http://mt.ellimorris.com/carytown-optical/

the goal is to get the content full-width once the sidebar is hidden, but keep the 175px spacer for the navigation when the sidebar is present. I’m pretty sure I had it working at one point, but then broke it while trying to ferret out a pesky top margin/padding issue above the image. for the life of me I can’t get it working again and i’ve tried so many things i’m totally disoriented … :-/.

advance thanks! :slight_smile:

2

Hi,

You are over-riding portfolio slideshow immediately after you have set it in the media query.


@media only screen and (min-width:640px) { 
#nav-top-menu {display:none !important;}
.lev2 #content {padding:0; margin-top:-10;}
.portfolio-slideshow {margin:-10px 0 0 0;}
}

@media only screen and (max-width:640px) { 
#per-page-widget {display:none;}
.lev2 #content, .lev1 #content {padding:0; margin-top:-10;}
.portfolio-slideshow {margin:-10px 0 0 0;}
#content .entry-content {padding:0;}
}


[B].portfolio-slideshow {margin: 0 0 0 175px;}[/B]

Media queries are not exclusive and just follow normal cascade rules.

BTW you have also missed the units form here:


margin-top:-10;

That wil be treated as zero ( or ignored).