Overwrite JQuery css values with Css MediaQueries

Question

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?

emmanuel · Accepted Answer · 2015-02-18 10:34:43Z

1

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().

edited Feb 18, 2015 at 10:34

answered Feb 18, 2015 at 10:14

emmanuel

9,61310 gold badges27 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Noël Widmer Over a year ago

Omg, I use !important a couple times on my page but I didn't though about it at all in this case! Thank you. Will accept in 11 minutes...

Collectives™ on Stack Overflow

Overwrite JQuery css values with Css MediaQueries

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related