Why my media query for 768px and 576px not working-CodePudding

So i am trying bootstrap media query, but it wont work on 768px and 576px. I tried the minimum width but it is also does not work.

enter code here

   .changing-color {
    background-color:powderblue;
    width: 100vw;
    height: 30vh;
    font-size: 3vw;
  }

  @media screen and (max-width: 1400px){
    .changing-color {
      background-color:chartreuse;
    }
  }

  @media screen and (max-width: 1200px){
    .changing-color {
      background-color:blueviolet;
    }
  }

  @media screen and (max-width: 992px){
    .changing-color {
      background-color:brown;
    }
  }

  @media screen and (max-width: 768px){
    .changing-color {
      background-color:darkorange;
    }
  } 

   @media screen and (max-width: 576px){
    .changing-color {
      background-color:darkkhaki;
    }
  }

CodePudding user response：

Your CSS is correct, it works in this pen. Maybe you are not resizing your screen? Because that is exactly what these media-queries are for.

This snippet below is limited in width, so it will show probably darkorange depending on how you are viewing this page. On mobile it might even show darkkhaki.

.changing-color {
    background-color:powderblue;
    width: 100vw;
    height: 30vh;
    font-size: 3vw;
  }

  @media screen and (max-width: 1400px){
    .changing-color {
      background-color:chartreuse;
    }
  }

  @media screen and (max-width: 1200px){
    .changing-color {
      background-color:blueviolet;
    }
  }

  @media screen and (max-width: 992px){
    .changing-color {
      background-color:brown;
    }
  }

  @media screen and (max-width: 768px){
    .changing-color {
      background-color:darkorange;
    }
  } 

   @media screen and (max-width: 576px){
    .changing-color {
      background-color:darkkhaki;
    }
  }

<div ></div>

CodePudding user response：

Have you added a viewport meta tag like this ?

<meta name="viewport" content="width=device-width,initial-scale=1">

This is needed because by default, most mobile browsers lie about their viewport width.

Reference Beginner's Guide to Media Queries