Question

So I’m using an @media query to use a different css file on the mobile version of my site. Here’s the head of my html:

<link rel="stylesheet" type="text/css" media="screen,projection" href="<?php bloginfo('stylesheet_url'); ?>" title="Simplr" />

<link media="only screen and (max-device-width: 800px)" href="mobile.css" type="text/css" rel="stylesheet" />

However, I’m finding that the mobile css just ‘adds’ to the desktop css, rather than having the desired effect of only loading the css rules in mobile.css. For example, having a single rule about the background color being red in mobile.css, won’t just give me some unformatted web content with a red background, but will render the desktop css with a red background.

I want to completely start from scratch building up a nice, functional view of the site on mobiles with a blank css file, but I don’t want to have to manually undo the many tweaks I’ve done to make the site nice for desktop. In particular, I’d like to be able to eliminate the chance of some stray desktop css preventing the site from rendering with the correct proportions on mobile.

Any thoughts?

Answer 1

<link media="only screen and (min-device-width: 0px) and (max-width:800px)" href="mobile.css" type="text/css" rel="stylesheet" />

<link media="only screen and (min-device-width: 801px) and (max-width:9999px)" href="<?php bloginfo('stylesheet_url'); ?>" title="Simplr" type="text/css" rel="stylesheet" />