CSS - Media Queries not working properly

Question

I'm new to media queries, and I've watched a few tutorials on the best practices, but it seems i can't get mine to work..

I created a simple text div to make sure it even works, and I'm trying to have the background-color of the div change to blue once the width of the browser is smaller than 500px .

Does anybody know what I'm missing?

 #text_box { height: 100px; width: 100px; background-color: red; } @media screen and (max-width: 500px) { #test_box { height: 100px; width: 100px; background-color: blue; } } 

 <div id="text_box">Test</div> 

Here is my demo

Answer 1

you have a typo inside your media query in your id ,it is not test_box , but text_box .

plus you don't need to repeat properties already set before, if they have the same value.

 #text_box { height: 100px; width: 100px; background-color: red; } @media screen and (max-width: 500px) { #text_box { background-color: blue; } } 

 <div id="text_box">Test</div>