@media only screen and (max-width: --px) not working?

Question

I want to give style to my web page when it is open on the device whose width is less than 620px but media query for 'width' is not working it is working for "max-height" but not for "width". media query for width is not displaying in dev tools though it is showing in dev's source code.

@media only screen and (max-width : 620px) {
div.enterdetails
{
    top:32% !important;
}
div.headline{
    top:19% !important;
}
.select-btn{
    width:129px !important;
}   }

Here is the snippet,

.headline {
   position: relative;
    top: 0px;
	left:20%;
    width: 61%;
    font-weight: 600;
    color: black;
    font-size: 32px;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    text-align:center;
	 text-align-last:center;
}
.enterdetails {
    position: relative;
    top:4%;
    width: 100%;
    height: 113px;
    background-color: rgb(0,0,0);
}
 .slctstyle
{
	position: relative;
    top: 35%;
    width: 91%;
    height: 96%;
    left: 7%;
    color: white;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
	
	}
  
.select-btn{
	height: 32px;
    width: 126px;
}

@media only screen and (max-width : 620px) {
div.enterdetails
{
    top:32% !important;
}
div.headline{
    top:19% !important;
}
.select-btn{
    width:129px !important;
}   }

  
  <div class="headline">Hi, lets select data!</div>
  <div class="enterdetails">
    <div class="slctstyle">
  <select class="select-btn">
  <option>A</option>
  <option>B</option>
  </select>
  
  <select class="select-btn">
  <option>A</option>
  <option>B</option>
  </select>
  
  <select class="select-btn">
  <option>A</option>
  <option>B</option>
  </select>
  
  </div>
 </div>
  

Answer 1

The media query is working just fine. You can check it as the width of .select-btn changes from 126px to 129px. Since the variation is small it may not be very clear but you can verify it by inspecting your page.
However, the top property does not cause any change on the page.
But this is not because of media queries. If you use the unit in top as px instead of %, you will be able to see the changes when resizing. The reason that it is happening is because of positioning of the div. When you give 10%, it means 10% of the height of containing block, which in this case is body. So you could not see the changes using %'s. If you give height: 100vh and then apply top:10% it should work.
You can refer this