CSS: how to overwrite (unset) previously set max-width property values

user_3536236 0
Viewed 2682

I have an image element that is styled to scale to the screen size within bound parameters defined in a max-width.

This styling works fine. However I home some images that need this maximum size (a percentage) to be removed on smaller screens (under 480px). To do this I need to "unset" a max-width value for the element set by the template structure.

HTML:

<figure class='image left'>
     <div class='boxShadowInner wide190'>
           <img src='/images/Bag.jpg' alt='text'>
     </div>
     <figcaption><strong>caption text</strong></figcaption>
</figure>

(The boxShadowInner class sets a feathered border around the image).

Template CSS (standard):

.image.left {
    float: left;
    display: block;
    width: 70vw;
    max-width: 90%;
    padding: 0;
    top: 0;
    margin: 0 auto .5rem;
    text-align: center;
}

Template CSS (max-width:480px):

.tableBox .image.left:not(.carrier) {
    max-width: none;    /** THIS LINE **/
    width: auto;
}
.image.right, .image.left {
    float: none;
}

Noting the line above; I need to overwrite the max-width property set at the base universal level for the style sheet.

What I've tried already:

  • max-width: none; as suggested on this question (for -height) does not work in Firefox.

  • The only max-width property that does work as intended (in Firefox) is: max-width: max-content; but as stated on MDN:

    "This is an experimental API that should not be used in production code."

  • Other possible values for max-width do not give any change.

  • max-content (and similar keywords) are seeingly not ready for production usage according to caniuse.com.

  • There are multiple images this rule needs to apply to so setting a value figure (280px, etc) is not a possible solution.

  • I have tried max-width: auto; and Firefox tells me this is an invalid value.

  • !important makes no difference.

  • max-width: initial or max-width: unset also makes no difference.

What I'm trying to achieve can be done with this:

.image.left {
    float: left;
    display: block;
    width: 90%;
    /* max-width: 90%;     // Disabled */
    padding: 0;
    top: 0;
    margin: 0 auto .5rem;
    text-align: center;
}

Screnshot of Firefox Developer Tools shows that it works perfectly when manually disabling the max-width rule setting, but I can't simulate this behavior using CSS rules:

enter image description here

How do I overwrite the set max-width property to return it to browser default?

I made a fiddle but it doesn't seem to be working well with media queries..... (I don't use fiddles much I'm afraid)

https://jsfiddle.net/b8bsxtqu/7/

css
2 Answers

This may not be the answer you're after for your specific situation, but it's how I would approach it.

Instead of writing your CSS for your desktop/laptop and retrofitting it for smaller devices, write your CSS for the smallest devices first, then use media queries to 'enhance' the CSS (with media queries) and visuals for larger devices. This is what's known as a mobile first approach, or more accurately smaller devices first.

Reasons for developing this way.

  1. You start with a simpler CSS code base.
  2. It's easier to maintain and debug.
  3. It keeps you in the mindset of keeping a priority on mobile browsers (have you looked at mobile usage statistics lately? Whoa.)
  4. It puts the priority on content (where it should be)

Applying this to your situation, rather than "undoing" or "unsetting" a style for a small device. Your CSS is written purposely without that style at the start because you're writing for small devices first. Then, using media queries you begin to add styles for larger, more accommodating devices.

In the snippet below you can see that the img has no max-width style applied to start. Then for devices with a min-width of 480px, you can specify your max-width.

img {
  width: auto;
}

@media screen and (min-width: 480px) {
   img {
     max-width: 500px;
   }
 }
<img src='https://placehold.it/900x500' alt='text'>

user_40319530

I found the issue was that the above max-width was being set on the container rather than on the <img> tag itself where the <img> tag had its own max- and min-width values set and removing/ adjusting these resolved this CSS.

user_35362360
Related