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.

8 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.

  6. Posted December 10, 2017 at 12:45 am | Permalink

    If you’re using a fieldset be aware that fieldset has a min-width set too. This can seriously get confusing, especially if you end up with max-width: auto or some other invalid value. For max-width ‘auto’ is identical to max-width: XXXXX. See this for fieldsets: https://stackoverflow.com/questions/17408815/fieldset-resizes-wrong-appears-to-have-unremovable-min-width-min-content

  7. iMpetus
    Posted February 12, 2018 at 7:55 pm | Permalink

    Works for me thanks

8 Trackbacks

Leave a Reply