Don’t Use min-width Media Queries

Opera Mini Screen Shot
Mobile Friendly

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.

Continue reading Don’t Use min-width Media Queries