 <p>Because of CSS <a href="http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/" rel="nofollow">Specificity</a> and because your iPad media query is actually always going to be true (since the screen width on mobiles is always less than 768px). So it will override the rules/selectors you have in your other stylesheets.</p> <p>You can try reordering you stylesheets the other way around (ie iPad lists first), but i would recommend you specify more explicit media queries to achieve what you want. Have a look at adding a <code>min-device-width</code> clause to your querys.</p> <p>You can see an advanced example here: <a href="http://css-tricks.com/snippets/css/media-queries-for-standard-devices/" rel="nofollow">http://css-tricks.com/snippets/css/media-queries-for-standard-devices/</a></p>