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


Tags: override,css

Problem :

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.


    CSS Howto..

    How are CSS properties implemented by different browsers? [closed]

    How to get background image from internal css using xpath?

    How can I keep the original :focus element with CSS?

    Css - how hide third element td?

    How to make CSS column not be forced down

    How to freeze frame with css

    Getting unordered list in front of image slide-show in IE8, IE7 and probably IE6

    How to toggle the contents of span when clicked?

    How to cancel an upstream CSS declaration?

    How do I require main.css.erb in application.css

    How can I apply a style to element if the user came to website using a link with an anchor/hash [closed]

    In Windows8 Metro, how can I change the highlight color of the already selected item in a dropdown list

    How can I display links in 2 rows?

    How do I refer to an image resource from CSS in grails?

    How to make a child div to grow to full screen using CSS?

    How to fix a footer overlay on main in HTML

    How can I apply a custom material design theme to a Bootstrap component

    How do I keep a mouse cursor from changing to 'selected text' in JQuery?

    how to conditionally transform div to and from a state on multiple presses of same button

    css and basket: how to do an “always visible” basket?

    How do I make a div expand to the width of the page with css?

    How to override CSS :hover?

    How to fix side bar and header using CSS for JS & jQuery Scroller

    How to disable temporary cursor with javascript?

    How to remove default border of button in jquery mobile?

    how to remove css property using javascript?

    How can I change the inline style text color of an element without the ability to add a class or id?

    How to stick a background behind the navbar?

    How to create a Twitter Bootstrap Textarea

    How to create dynamic CSS based on user input