Changing color of headline if width is under 600 doesn't work-CodePudding

My problem is that it doesn't change the color if the width is under 600px. Here is my code: `

    /* Add a headline */
      .top-bar h1 {
      float: left;
      margin-left: 15px;
      font-size: 50px;
      font-weight: bold;
      color: white;
    }
  
    @media (max-width: 600px) {
    .top-bar h1 {
      float: left;
      margin-left: 15px;
      font-size: 50px;
      font-weight: bold;
      color: red;
    }
  }

` The media somehow doesn't get triggered.

If I just leave it like that the headline is always white and doesn't change it's color.

CodePudding user response：

I'm not sure what you actually meant because your code seems working.

Anyway I crafted a snippet here with the evidence of the viewport size refresh on window resize, to show the correct working of the media query.

If you open the responsive mode in your browser, you'll see the style changing in real time.. and when the viewport width will be <= 500px the headline color will remain red and will turn black when the size will be bigger.

window.addEventListener("resize", (event) => {
  refreshViewportSize();
});

document.addEventListener('DOMContentLoaded', ()=>{
    refreshViewportSize();
});

const refreshViewportSize = ()=>{
  const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
  const vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0);
  document.getElementById('viewportsize')
    .innerText = `w: ${vw}`;
  //.innerText = `${vw}x${vw}`;
}

h1.top-bar {
  float: left;
  margin-left: 15px;
  font-size: 50px;
  font-weight: bold;
  color: black;
}

@media (max-width: 500px) {
  .top-bar h1 {
    color: red;
  }
}

#viewportsize{
  position:absolute;
  top:0;
  right:0;
  border: solid red;
  font-size: 3rem;
  background: red;
  color: white;
  padding: .25rem;
  border-radius: 5px;
}

<div >
  <h1>Headline</h1>
</div>

<div id="viewportsize"></div>

CodePudding user response：

You are probably missing a meta viewport tag and only testing on an emulator through a browser.

If you run your code on a desktop browser and gradually make the width smaller you will see that it works.

However, if you enter your browser's dev tools inspect facility and choose say an iPhone SE then it does not work - the emulator doesn't pick up the viewport width change.

Put a meta element in the head of your code to set the viewport.

For example:

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <style>
    /* Add a headline */
    
    .top-bar h1 {
      float: left;
      margin-left: 15px;
      font-size: 50px;
      font-weight: bold;
      color: white;
      background: black;
    }
    
    @media (max-width: 600px) {
      .top-bar h1 {
        float: left;
        margin-left: 15px;
        font-size: 50px;
        font-weight: bold;
        color: red;
      }
    }
  </style>
</head>
<div >
  <h1>Heading</h1>
</div>

For further information on the setting of a viewport see https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag