material design drawer issue

Question

i have a codepen in which there is a dismissible drawer with top app bar component which on resizing to 598px width the top app bar width decreases from 64px to 56px but when using @media query to align it the drawer is not aligning please can you give a solution to this

codepen >>> https://codepen.io/BhavyaSingh2003/pen/NJbGoO

 @media all and (max-width: 599px) {
 .mdc-drawer--dismissible {
   top: 56px;
   height: calc(100% - 56px);
  }
}

Answer 1

This CSS declaration:

.app-drawer-layout .mdc-drawer--dismissible

has more specificity (weight) than just:

.mdc-drawer--dismissible

So you can either write selector with the same specificity:

@media all and (max-width: 599px) {
  .app-drawer-layout .mdc-drawer--dismissible {
    top: 56px;
    height: calc(100% - 56px);
  }
}

...or add !important to your CSS:

@media all and (max-width: 599px) {
  .mdc-drawer--dismissible {
    top: 56px !important;
    height: calc(100% - 56px) !important;
  }
}