have html divider respond to pixel size-CodePudding

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 >Example DIV.</div>


</body>
</html>

CodePudding user response：

You need to add !important to force the CSS according to the screen resolution.

<!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; !important
      }
    }
    
    @media (min-width: 551px) {
      p {
        font-size: 32px; !important
      }
    }
    
    @media (min-width: 551px) {
      div {
        background-color: Blue !important
      }
    }
  </style>
</head>

<body>
  <div ><p>Example DIV.</p></div>
</body>

CodePudding user response：

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 >Example DIV.</div>


</body>
</html>

CodePudding user response：

There are two reasons this isn't working the way you want it to currently.

First, a style declared outside of a media query has higher "importance" than a style declared inside the media query. In order to combat that, you need to use !important after the media query style.

Second, because you are using a more general object name for the media query, it won't have as much hierarchy once again. Instead of using div, you need to use the same div.example inside the media query.

So the two solutions are either:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div.example {
  padding: 20px; /* removed the bgcolor here... see below*/
}

@media (max-width: 550px) {
    div.example {
  background-color: lightgrey; /*option 1: move the gray state into a media query, making it the same level of importance as the blue state*/
}
  p { font-size: 16px; }
}

@media (min-width: 551px) {
  p { font-size: 32px; }
  div.example { background-color: blue} /*option 2: use the same specificity of naming inside the media query.*/
}



</style>
</head>
<body>



<div >Example DIV.</div>


</body>
</html>