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?

Answer 1

You can override (unset) max-width with

.foo{ max-width:none; } 

... to clear any inherited max-width.

Answer 2

Try using !important, or selector with higher specificity.