Disabling a previously specified max-width

I just did something stupid with my CSS but it had me scratching my head for a while.

If you have a max-width set and need to disable it in a cascaded style, you need to set it to none rather than auto i.e.:

img {
    max-width:100%;
}

#some-other-selector img {
    max-width:none;
}

This sounds obvious (and it is really), but because you usually use width:auto to override a previously specified width, I found myself inadvertantly doing the same with max-width and it took a while to realise what I’d done.

This entry was posted in Tips and tagged . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

6 Comments

  1. Posted February 24, 2014 at 3:52 pm | Permalink

    Better

    max-width : inherit !important;

    • Bueks
      Posted March 20, 2014 at 12:44 pm | Permalink

      Why is this better?

  2. Posted October 27, 2014 at 4:08 pm | Permalink

    Thanks for posting this as it had me scratching my head for a while too! Obvious, but sometimes the obvious just isn’t so obvious! 🙂

  3. Pradesh
    Posted April 16, 2015 at 5:00 pm | Permalink

    inherit !important;

    works for me, while
    max-width:none;

    does not.

  4. Posted January 6, 2016 at 5:24 am | Permalink

    max-width:none;works great thank yu ..sir

  5. Posted May 26, 2017 at 6:10 pm | Permalink

    Thanks for this solution.

5 Trackbacks

Leave a Reply