在这种情况下，如何使用jquery更改“！important”规则？

Question

I have a video in Vimeo format on my web page. As I size down, at 985px and less, the video disappears and the column width goes from "560px" to "auto!important" as shown:

@media only screen and (max-width: 985px)
.main-content-area {
width: auto!important;
background: #fff;
padding: 0 20px;
}

What specific code can I use to change this line/remove it:

width: auto!important;

I want this line only--added as the width:

min-width: 100%;

I appreciate any input. Thanks!

Answer 1

@media only screen and (max-width: 985px){
   .main-content-area {
      min-width: 100% !important;
   }
}

Since your css is appended after the (I presume) library's css, your css will override it.

Answer 2

If you dont wanna try it using media queries/css you may try it using jquery instead

$(window).resize(function() {
  if($(window).width()<=985)
  { $('.main-content-area').css('min-width','100%'); }
});

You can also try it on $(window).load.