Max-width initial not working in IE?

Posted on June 12, 2017 by Dan Doicaru in HTML/CSS Category with Easy Difficulty

This problem with max-width initial not working in Internet Explorer was bugging me every time I was working on a project and it seems a lot of people are complaining too over the internet.

The action occurs whenever you are trying to overwrite the CSS width or max-width property from a certain amount of pixels or percent to the initial point. Doesn't matter if you are using it inside responsive meta tags or simple, it just doesn't work to cancel or overwrite this property.

max-width initial not working in Internet Explorer

Video Tutorial

The Problem (max-width initial not working)

As an example, we have a container with 200 pixels width for a big desktop. If we want to disable the max-width on a lower resolution, using initial value, will not work at all.

.someDiv {
	max-width: 200px;
}

@media (max-width: 1366px) {
	.someDiv {
		max-width: initial;
	}
}

The Fix

In this case we can use max-width: inherit to retrieve the original value the same as the parent container, instead of using initial. This trick will work in Internet Explorer and Firefox (if you have problems there too).

.someDiv {
	max-width: inherit;
}

Now your max-width property will be overwritten without any problems on mobile or any other cases. So, next time max-width initial not working in IE, try this tip.

Don't forget that this rule applies the same for height, width and max-height properties. Example above was tested using Internet Explorer 11.

Live Demo

Related Articles
Comments
Hint: Wrap your code syntax (html, css or others) between <pre> and </pre> tags. All comments are moderated.


6 + 4 =

Search
Subscribe by E-mail

HTML-TUTS is created and maintained by Dan Doicaru.
This website is a rebrand to Extreme Design Studio (extremestudio.ro), built under WordPress platform.