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);
  }
}

Rustem Gareev · Accepted Answer · 2019-03-09T07:29:25.873

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;
  }
}

edited Mar 09 '19 at 07:29

answered Mar 09 '19 at 07:24

Rustem Gareev

804
1
7
14

1

thanks rusten gareev by the way the pen was fork of your pen on codepen you make nice material design pens. – Bhavya Singh Mar 09 '19 at 07:30
Just noticed it! Thanks! I will surely continue to make code pens about MDC Web. You can ask me about any further questions! – Rustem Gareev Mar 09 '19 at 07:31
@rusteemgareev can you please delete this answer or upvote the question cause -1 doesnt looks nice on my profile – Bhavya Singh Mar 17 '20 at 13:22

material design drawer issue

1 Answers1