CODEWITHSUNDEEP
css
panthro
panthro

Reputation: 24099

Remove important styles in CSS

Im using google places api for a place autocomplete search - the user starts typing and results pop up.

I've styled the google container using !important to override the styles. So for my desktop css through media queries I have something like:

bottom: 100px !important;
top: auto !important;

Now on my mobile css, again through media queries, I need to move the position, I need the default styles back - the styles are controlled via google in the style tag on the element. But as I have used important i cannot remove them. I have tried:

bottom: auto !important;

Which fixes the bottom position, but how can I remove the top position so that it defaults to what is in the style tag on the element. I've tried:

top: auto !important;
top: inherit !important;

But with no luck.

Upvotes: 1

Views: 22403

Answers (2)

Lieutenant Dan
Lieutenant Dan

Reputation: 8294

Using that many !important 's is messy.

A few suggestions: (based on the little code your showing)

2. Don't override an :auto with an :auto. Try to override the styles with a number that give you similar look as :auto

3. Try removing all !important s and call the unique CSS within their perspective media query resolutions, properly. eg.

    @media screen and (min-width:320px) and (max-width:480){
         ... // Your unique styles to Mobile Here
    }

4. If all else fails; though, don't know why it would. You can .toggleClass with jQuery to attach a class within a condition. And .removeClass whenever you want. A simple fiddle of .toggleClass (demo) here.

But you really should just be able to clean up your CSS and put everything in their specific media query defined resolutions.

Upvotes: 4

AnnieMac
AnnieMac

Reputation: 862

You should be able to do this by increasing specificity on your mobile css file and adding an !important value to this new value in the mobile stylesheet.

I'm not sure of your structure without seeing your html but if you can add an additional class or id to the parent container/element that is specific to mobile css and use that to target your mobile view

for example

#mymobile .classtooverride {newstyles !important;}

Upvotes: 4

Related Questions