0

How to override css media query !important property using jquery. matchMedia not working issue

#div{
  padding-left:10px;
}
@media screen and (min-width: 767px) {
  #div{
    padding-left:15px !important;
  }
}

var minql = window.matchMedia("(max-width:475px) and (min-width:320px)");
if (minql.matches) {
  $("#div").css({"padding-left": "30px" });
}
Abhishek Pandey
  • 13,302
  • 8
  • 38
  • 68
kannan D.S
  • 1,107
  • 3
  • 17
  • 44
  • please have a look at this SO question: http://stackoverflow.com/questions/11962962/overriding-important-with-css-or-jquery – vijayP Dec 22 '15 at 06:21
  • 1
    Possible Duplicate of http://stackoverflow.com/questions/462537/overriding-important-style/1577204#1577204 – undefined_variable Dec 22 '15 at 06:22
  • In fact, using `!important` is completely unnecessary in the code you have shared. Do not use it unless absolutely necessary—it defeats the purpose of cascading styles. – Terry Dec 22 '15 at 06:22

1 Answers1

0

Try this

if (window.matchMedia("(min-width: 400px)").matches) {
  /* the viewport is at least 400 pixels wide */
} else {
/* the viewport is less than 400 pixels wide */
}

You can also refer to this example: Source

Community
  • 1
  • 1
Little Phild
  • 785
  • 1
  • 6
  • 17