Override a css value from a third party lib

Question

I'm using a third party css library for styling, but I'd like to specify a different min-height for a particular div.
The div is using themeRow class which has a number of attributes and sets:

min-height: 200px

In my case this is much too large, and i'd like to set a different value i.e

min-height: 75px

So i've defined some inline css but my value is being ruled out when rendered and the div still draws at min-height: 200px

Any way I can tell css to use my value instead of the third party value?

<style>
.bannerHeight {
    min-height: 75px;
}
</style>


<div class="themeRow bannerHeight"></div>

Answer 1

You can use !important to override the min-height: 200px value which is being assigned to your <div> by the third-party library. Try using this CSS:

<style>
.bannerHeight {
    min-height: 75px !important;
}
</style>

Answer 2

IMHO it is better to use deeper levels over !important. If this is on your page 'main' then

<style>
.main .bannerHeight {
    min-height: 75px;
}
</style>

will override

<style>
.bannerHeight {
    min-height: 75px;
}
</style>

simply replace .main with whatever element is the parent to .bannerHeight, possibly just div .bannerHeight in this case as you hint. !important should be used for awkward situations where html css elements are being created dynamically, not for simple CSS overwriting as in this case.

But its your call.