Remove Background on Specific Media Query

Question

I want my background to go away when a specific screen size is met. Here's my CSS code..

@media only screen and (min-width: 0px) and (max-width: 479px) {
        .videohome { background-image: none; background-color:#fefefe; }
    }

.videohome {
        background: url(images/extras/homevideobg.png) repeat-x #e6e6e6;
    }

Then when i view it on Google Chrome with a screen size of 479px; the background is still there..

Here's the Inspect Element,

Inspect Element -- Google Chrome

www.mysite.com/media="all"
.videohome {
background: url(images/extras/homevideobg.png) repeat-x #e6e6e6;
}
___________________________________

www.mysite.com/media="all"
@media only screen and (max-width: 479px) and (min-width: 0px)
.videohome {
background-image: none;  <-- this part is Striked Through
background-color: #fefefe;  <-- this part is Striked Through
}

What i'm doing wrong? Is the order important?

Answer 1

Yes, the order of the selector(s) is important since the stylesheet is read from top to bottom (that's the cascading nature of CSS). This means that you would have to place the media query CSS below the initial declaration if you want it to be overridden.

If changing the order of the CSS doesn't solve your problem, then the issue is specificity. Just increase the specificity of the selector inside of the media query in order to effectively override the other CSS.

Example Here

@media only screen and (max-width: 479px) and (min-width: 0px) {
    .videohome {
        background: none;
    }
}