How to remove a class with the media

Question

When the @media screen and (max-width: 500px) are active, removing the .fade class . How can i do this? my script is below.

@media screen and (max-width: 500px) {
    .post_profile_image{
        width:35px;
        height:35px
    }
    .fade{
    /* Remove this class */
    }
}

<div id="myModal" class="modal fade" role="dialog">

Answer 1

How to remove a class with the media

No. Instead, you define new rules that apply to the class that implements the style you want to make. Media queries cannot add or remove classes for elements; they simply change which rules apply to elements.

Answer 2

$(window).resize(function(){
 If($(window).width()<500){
  $('.fade').removeClass('fade');
 }
});

Answer 3

CSS DOM.. .. . .

HTML jsFiddle.

DEMO: jsFiddle

HTML

<div id="myModal" class="modal fade" role="dialog">

CSS:

.fade { 
     opacity: 0; 
     transition: opacity 0.15s linear;
     -o-transition: opacity 0.15s linear; 
     -webkit-transition: opacity 0.15s linear; 
}

.fade:hover {
    opacity: 1
}

@media screen and (min-width: 0px) and (max-width: 500px) {
    .post_profile_image{
        width:35px;
        height:35px
    }
    .fade{
        transition: none;
        -o-transition: none; 
        -webkit-transition: none; 
    }

}