Second CSS style not overriding the first

Question

.review-stars .nt-testimonials footer {
    margin-top: 0px;
    float: right;
}

@media only screen (max-width:40em){
    .review-stars .nt-testimonials footer {
        float: none!important;
    }
}

Here is basically what my code looks like. The element is still float:right even after I added that line of code for responsiveness... What am I doing wrong?

Other classes I've added into the @media section are working without problem

Answer 1

You missed an "and" I think.

@media only screen and (max-width:40em) {

}

Per MDN

The "and" keyword is used for combining multiple media features together, as well as combining media features with media types. A basic media query, a single media feature with the implied all media type, could look like this:

@media (min-width: 700px) { ... }

If, however, you wanted this to apply only if the display is in landscape, you could use an and operator to chain the media features together.

@media (min-width: 700px) and (orientation: landscape) { ... }

Now the above media query will only return true if the viewport is 700px wide or wider and the display is in landscape. If, however, you only wanted this to apply if the display in question was of the media type TV, you could chain these features with a media type using an and operator.

@media tv and (min-width: 700px) and (orientation: landscape) { ...  }