have html divider respond to pixel size

In my html code below i added a divider which i want the background color to change the blue when it reaches a certain pixel width. Right now my code is having no effect. I want it to the divider to change to blue. How can i get this to work? The code in question is @media (min-width: 551px) { div { background-color: Blue } }

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div.example {
  background-color: lightgrey;
  padding: 20px;
}

@media (max-width: 550px) {
  p { font-size: 16px; }
}

@media (min-width: 551px) {
  p { font-size: 32px; }
}



@media (min-width: 551px) {
  div { background-color: Blue }
}



</style>
</head>
<body>



<div class="example">Example DIV.</div>


</body>
</html>

Solution

I'm assuming you want the large screen bg color to be lightgrey and the small screen (less than 551px) color to be blue?

If that is the case, you need to specify *max-width on the media query. I would also make sure you call out the div by class so you aren't targeting all your divs.

Try this code.

If I have the colors reversed, you can just switch them.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div.example {
  background-color: lightgrey;
  padding: 20px;
}

@media (max-width: 550px) {
  p { font-size: 16px; }
div.example { background-color: blue }
}

@media (min-width: 551px) {
  p { font-size: 32px; }
}




</style>
</head>
<body>



<div class="example">Example DIV.</div>


</body>
</html>