AdvancingEnemy
AdvancingEnemy

Reputation: 422

why !important doesn't work in css?

i want to zoom in all the font-size to 200% in my web, here are some test code in fiddle,

if really PX issue, but why here the code are working if i add the style in "<-h2>" ?

<div  >
<h2 class="test" style="font-size:300% !important">
hello
</h2>
<h2 class="test2">
hello
</h2>
<h2 class="test3">
hello
</h2>

or, there is another question how can i enlarge all the font-size on a same rate?

Upvotes: 0

Views: 138

Answers (3)

Surya Teja
Surya Teja

Reputation: 1526

.test{
  font-size:10px;
}
.test2{
  font-size:20px;
}
.test3{
  font-size:30px;
}

div h2{
  zoom:300%!important;
}
<div class="data">


<h2 class="test">
hello
</h2>
<h2 class="test2">
hello
</h2>
<h2 class="test3">
hello</h2>

</div>

you can also use Zoom property like this

.test{
  font-size:10px;
}
.test2{
  font-size:20px;
}
.test3{
  font-size:30px;
}

.data{
  zoom:300%!important;
}
<div class="data">


<h2 class="test">
hello
</h2>
<h2 class="test2">
hello
</h2>
<h2 class="test3">
hello</h2>

</div>

Upvotes: 0

Head In Cloud
Head In Cloud

Reputation: 2051

Here it is not working because you have used PX

you can use relative units for that

click here for absolute and relative units

Upvotes: 0

hdotluna
hdotluna

Reputation: 5732

Use em and rem.

You can use this http://pxtoem.com/

HTML

<div style="font-size:2rem !important" >
    <h2 class="test">
    hello
    </h2>
    <h2 class="test2">
    hello
    </h2>
    <h2 class="test3">
    hello
    </h2>
</div>

CSS

.test{
  font-size:1em;
}
.test2{
  font-size:2em;
}
.test3{
  font-size:3em;
}

Working fiddle: https://jsfiddle.net/eom40w0L/8/

Upvotes: 1

Related Questions