overriding - css: how to override max-width value with a larger (less restrictive) value

Question

I have a css file with this style:

.filefield-element .widget-edit {max-width: 70%;}

I wanted to increase the max-width without modifying that css file, so I created a custom css file with this style:

.filefield-element .widget-edit {max-width: 99%;}

In the "html/styles" pane, I see that the styles are listed in the correct order:

.filefield-element .widget-edit {
    max-width: 99%;
}

.filefield-element .widget-edit {
    float: left;
    max-width: 70%;
}

However, "max-width: 99%" is not overriding "max-width: 70%". It seems that the more restrictive value (70%) is used, even when the less-restrictive value (99%) comes first.

Is there a way to override a max-width value with a larger (less restrictive) value?

question from:https://stackoverflow.com/questions/4924362/css-how-to-override-max-width-value-with-a-larger-less-restrictive-value

Answer 1

You can override (unset) max-width with

.foo{ max-width:none; }

... to clear any inherited max-width.