Search code examples
jqueryhtmlcssmedia-queries

Overwrite JQuery css values with Css MediaQueries

I am building a sort-of responsive web layout using css media queries. I just started including some animations with jQuery and ran into the following problem:

When animating elements with jQuery, each element receives the animated values in their style="..." property. That means their original values, which may have been stored in a class, are ignored. I have a media query which targets print and resets the animated values to provide a better visual experience on paper. The issue is, that the changes in the media queries do not affect the element, since they now have their own style property which is stronger than the class settings.

@media print{
    .PaddOnScroll{
        padding-left: 1.6em;
        opacity: 1;
    }
}

<div class="ContentBounds TitleFont PaddOnScroll" style="padding-left: 0px; opacity: 0;">
    ...
</div>

Do you have an idea of how I can force my media queries to be applied?

Solution

  • The only way to override an inline rule via css is using !important.

    @media print{
    .PaddOnScroll{
        padding-left: 1.6em !important;
        opacity: 1 !important;
    }
}

    Another solution using jquery only is to count screen size and apply rule with .css().