CODEWITHSUNDEEP
htmlcssresponsive-designmedia-queries
StinkyTofu
StinkyTofu

Reputation: 223

CSS - Media Queries not working properly

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

Upvotes: 0

Views: 74

Answers (1)

dippas
dippas

Reputation: 60543

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>

Upvotes: 4

Related Questions