I need to bind the CSS class property value dynamically for desktop. i have using ng-deep in angular. if i use the ng-deep inside the @media query is not working.

i have tried below code in css

 @media (min-width: 1025px) and (max-width: 1280px) {

   ::ng-deep.bs-datepicker {
    left: var(--my-var) !important;
   }

  }

ng-deep CSS is not working at media query syntax. where i need to place or what i need to do?

I need to bind the CSS class property value dynamically for desktop. i have using ng-deep in angular. if i use the ng-deep inside the @media query is not working.

i have tried below code in css

 @media (min-width: 1025px) and (max-width: 1280px) {

   ::ng-deep.bs-datepicker {
    left: var(--my-var) !important;
   }

  }

ng-deep CSS is not working at media query syntax. where i need to place or what i need to do?

• javascript
• css
• angular
• typescript

2 Answers 2

::ng-deep does work inside a media query... something else must be off for your specific case;

relevant CSS in typeahead-basic.ts:

  ::ng-deep .dropdown-menu.show { background:lightblue;}
  ::ng-deep .dropdown-item { color:red !important; }
  @media screen and (max-width:768px){
    ::ng-deep .dropdown-menu.show { background:lightgreen;}
    ::ng-deep .dropdown-item { color:orange !important; }
  }

plete working stackblitz here

update: for your shared stackblitz, the correct syntax is below... you gotta check your page on the widths between 1025px and 1280px and you will see the effect in action:

@media  (min-width:1025px) and (max-width: 1280px) {

::ng-deep .third-party-content{
  left:30px;
  position: absolute;
  color:red;
}

}

I just found out you can do it like this in scss

::ng-deep.bs-datepicker {
  @media  (min-width:1025px) and (max-width: 1280px) {
    left:30px;
    position: absolute;
    color:red;
  }
}

I might be late to the conversation but eh, If you still need it or anyone else like me still looking... I hope it works for you too :)