CODEWITHSUNDEEP
htmlcssmedia-queries
serene
serene

Reputation: 1646

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

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>

Upvotes: 1

Views: 680

Answers (3)

AdityaSrivast
AdityaSrivast

Reputation: 1084

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

Upvotes: 1

ericwin
ericwin

Reputation: 11

try changing '.select-btn' inside the @media only screen to '200px' or maybe add a 'background-color:red', you will see the different when the screen is 620px or less.

I think the @media only screen is working but the 'top' property isn't working.

Upvotes: 1

Carlos GR
Carlos GR

Reputation: 23

You have to add meta viewport tag in the head of your html.

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

The initial-scale property controls the zoom level when the page is first loaded. If this tag not exist, when resize is changing the scale but not doing a adaptative resizing.

Upvotes: -1

Related Questions