Element doesn't follow media query's height

Question

I'm trying to resize the logo of my webpage when the screen hits a max-width of 991px. I added a background-color of black just to see if it works. The background color changes but the height doesn't. When I inspected the element on Chrome, the height on my media query is crossed out. And when I unchecked the height in my body/original CSS, the height in my media query works.

Codes:

.webpage-logo{
   position: relative;
   width: 15%;
   height: 10%;
   margin-bottom: 0;
  }

@media only screen and (max-width: 1199px){
  .webpage-logo{
     height: 500px;
     //background-color: #000;
  }
 }

provide the html you are working on and please verify that you are not applying any inline styles to the html element. Provide a fiddle if possible. — vdua

user1795832 user1795832 · Accepted Answer · 2014-02-26T02:37:05

Without providing the full HTML and CSS there is no way to answer this since anything could be overriding CSS. The one thing that should work is adding !important to the end.

So instead of height: 500px;, do height: 500px !important;

I did this code and it works fine, so something else in your CSS is overriding it:

<!DOCTYPE html>
<html>
<head>
<style>
.webpage-logo{
   position: relative;
   width: 15%;
   height: 10%;
   margin-bottom: 0;
   background-color:#000000;
  }

@media only screen and (max-width: 1199px){
  .webpage-logo{
     height: 500px;
     //background-color: #000;
  }
 }
 </style>
</head>
<body>
<div class="webpage-logo" style="margin-left:10px;">test</div>
</body>
</html>

Element doesn't follow media query's height

1 Answers