Is there possible that remove !important property from element on specific resolution?

Question

I'm using carousel slider more than two times and its .item height is 100%. I had to adjust the main slider on specific height, so i added a class .custom-slider in header tag put the style with !important tag, because there was already 100% height .

.custom-slider {
    height: 645px !important;
}

Its adjusted and working fine. Now I have to adjust the on different resolution, so i have to reduce the height 645px to 496px, but due to !important property new added height does not working.

I'm trying following style on 1024 reslution, but its not working.

.custom-slider {
    height: 496px !important;
}

This accepted answer is well explained, but i didn't resolve my issue, can any guide me regarding this. I would like to appreciate.

This seems like the same question as the one you've linked to. Can you explain why you need a new question / what the difference is? Also - there should be no need to use !important if it's your own code. — Dave, Jan 28 '16 at 15:40
because there was already `height : 100%` on `header` tag, and i'm using more than two times on same page so i can't remove the `height : 100%`. — Ayaz Ali Shah, Jan 28 '16 at 15:41
See this answer to understand CSS better: http://stackoverflow.com/questions/5902858/order-of-prioritization-when-using-multiple-contradictory-css-files/5902873#5902873 — Dave, Jan 28 '16 at 15:42

score 0 · Accepted Answer · answered Jan 28 '16 at 15:42

0

Change the style to max-height and remove the important!

.custom-slider {
    max-height: 645px;
}

You could also make the selector more specific by adding the tag or a parents id/class. This would give the style a higher priority.

body div.custom-slider {
    max-height: 645px;
}

answered Jan 28 '16 at 15:42

Aaron

10,187
3
23
39

A nice trick to add specificity for the sake of adding specificity without any drawback is to repeat the class: `.custom-slider.custom-slider {}`. It matches exactly the same thing and once you know the trick, you instantly know why the previous gal/guy wrote it like that ^^ (edit: [it's in a spec](http://stackoverflow.com/questions/11572081/css-class-repetition-to-increase-specificity#11581106)) – FelipeAls Jan 28 '16 at 15:47

score 0 · Answer 2 · answered Jan 28 '16 at 16:02

If your trying to do this within the same resolution ( without using media queries ) you should be able to add a second class and give that a defined height as well - it should overwrite the first one. For example:

<div class="custom-slider secondary-height"></div>

.custom-slider.secondary-height {
  height: 496px !important;
}

score 0 · Answer 3 · answered Jan 28 '16 at 16:53

please check this: http://codepen.io/anon/pen/LGmrwZ

when you define a media query, it will catach the relevant one. if you go from bottom up, only the relevant !important will catch. and since they have same "cascading juice" the winner will be: the one that have the appropriate media trageting and the one that comes last, so combining them will solve the issue.

scss example

  .custom-slider{ 
  width:100px;
  border:1px solid red;
   @media (min-width:700px) {
    height: 20px !important;
       border:1px solid green;
  }
  @media (min-width:900px) {
    height: 80px !important;
    border:1px solid blue;
  }
}

by the way, if your css is loaded after the slider's css, you do not need !important.

same goes if you add a parent container to your css.

Is there possible that remove !important property from element on specific resolution?

3 Answers3