-2

I have a widget in my website's sidebar with an image. The website is responsive so that when resizing the browser and the sidebar is forced below the main content, the widget and image expands to fill the available space.

The image has an inline CSS width property: width: 100%.

I want to change this to: max-width: 100%

I tried using: max-width: 100% !important but the image is still expanding to the full width of the parent element even though the actual width of the image is smaller than the width of the parent element.

My understanding is that when the 2 properties come into conflict, themax-width: property overrides the width: property.

jrcollins
  • 153
  • 1
  • 9
  • Possible duplicate of [How can I override inline styles with external CSS?](https://stackoverflow.com/questions/16813220/how-can-i-override-inline-styles-with-external-css) – Carl Binalla Jul 10 '18 at 08:36
  • max-width:100% will do nothing since it's already at width:100% so you need to find something else – Temani Afif Jul 10 '18 at 08:37
  • 1
    Max-width does have a higher priority, yes. You can check that by writing `max-width:50%` or something, then you'll see the effect! But in this case, you need to change the width property itself, to `auto`. – Mr Lister Jul 10 '18 at 08:38

1 Answers1

-1

use max-width: 100%!important with width:auto!important;

Jorge Bowen
  • 184
  • 2