Search code examples
overridingcss

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

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?

Solution

  • You can override (unset) max-width with 

    .foo{ max-width:none; }

    ... to clear any inherited max-width.