Two weeks ago, I tried to point out a shortcoming of example CSS code over at the Opera.com website.
The point in question was the use of the “min-width Media Query” which I felt was incompatible with Internet Explorer.
Since this is tricky to describe without drawing a picture, I decided to set up a few sample web pages here to serve as a live demonstration of the problem.
The demo is: My min-width Media Query Test Case
For readers uninterested in the demo or the raw code, I am providing a set of screen shots below to fully illustrate the results.
My scenario begins with a page that looks fine in most browsers, but renders poorly in Opera Mini, a mobile web browser.
In an attempt to make the page mobile friendly, I used the min-width CSS media query to cause Opera Mini to ignore parts of the code. Unfortunately, this rendered poorly in Internet Explorer 8 and older versions.
The solution is to not use the min-width query. Instead, the CSS code from the original page is restored, and a max-width (instead of min-width) query is used to “undo” all of the code on any compatible browser, such as Chrome or Opera Mini. Internet Explorer sees only the original code, thus it is not adversely affected by the max-width query.