Media Query: Doesn't Change Style when i resize the browser

Question

I have this code . When i resize the browser to min-width: 480px it doesn't change the background color to blue and width to 100px

this is my code so far:

 @media screen and (min-width: 480px) { .boxcontainer { background-color: blue; width: 100px; } } .boxcontainer{ width: 1300px; background-color: green; height: 200px; } 

 <div class="boxcontainer"> </div> 

Thank you

Answer 1

Switch the order of the CSS rule, Change your CSS into

.boxcontainer {
    width: 1300px;
    background-color: green;
    height: 200px;
}
@media screen and (min-width: 480px) {
    .boxcontainer {
        background-color: blue;
        width: 100px;
    }
}

As in this JSFiddle example. the background is blue as long as the width is not less than 480px , otherwise it turns green.

IF by any chance you meant to do the opposite, because .boxcontainer{width:1300px} makes me think you want that , then just change the media query break point to @media screen and (max-width: 480px) instead of @media screen and (min-width: 480px) .

You can see the second option in this JSFiddle