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.