I'm trying to understand media query. Shouldn't the code here change height of the div element as well?

https://codepen.io/forestfire/pen/EwbQwa?editors=1100

Hey. Order is important in CSS. The rules in a declaration block will always override the ones in the block(s) that are before it. The width is changing only because you didn’t set one.

So, just put the media query after your normal .a {} declaration block and it’ll work:

.a {
  background-color: red;
  height: 50px;
}
@media only screen and (max-width: 768px) {
  .a {
    width: 100%;
    height:150px;
  }
}

Oh wow!!..Yes indeed. Thanks a ton