CODEWITHSUNDEEP
cssangular-material
Martheli
Martheli

Reputation: 981

CSS media query for mat-list

I am trying to get my material list text to shrink when size of screen is smaller. I tried creating a custom css class with no avail the text doesn't change, so I just tried to modify the mat-list class like this:

@media (max-width: 1026px) {
  .mat-list {
    font-size: 10px;
  }
}

@media (min-width: 1026px) {
  .mat-list {
    font-size: 60px;
  }
}

but the text size still does not change.

Upvotes: 0

Views: 396

Answers (3)

Mahyar Kia
Mahyar Kia

Reputation: 16

Maybe one of the following can help you:

  • Try linking your custom stylesheet as the last CSS stylesheet
  • Place your media queries at the end of your CSS file

This way you make sure you overwrite any existing CSS.

Upvotes: 0

Ruslan Gataullin
Ruslan Gataullin

Reputation: 478

Try 

::ng-deep {
   .mat-list {
      .mat-list-item {

        @media (max-width: 1026px) {
             font-size: 10px;
        }

        @media (min-width: 1026px) {
            font-size: 60px;
        }

      }

   }
}

Note: Only works in ViewEncapsulation.Emulated mode and considered as deprecated in official documentation but it still works as a temporary solution. Use style.scss approach suggested by @JuNe

Upvotes: 0

JuNe
JuNe

Reputation: 1997

You have to do this in your global styles.css stylesheet.

Upvotes: 1

Related Questions