title: Screen and Mobile Stylesheets
body: <p>I've looked through the stack overflow topics on this question, as well as some google search results but I can't seem to solve my issue.</p>
  
  <p>I've created a stylesheet for mobile devices(mobile.css) which is essentially a copy of my main.css with changes to many of the attributes.  When I load only mobile.css as the stylesheet it looks great on my iPhone, just how I want it to.  However when I put both in, I am getting a mix of both, but more of the main.css</p>
  
  <p>Any idea why?</p>
  
  <pre><code>&lt;head&gt;
  &lt;link rel="stylesheet" href="styles/main.css" type="text/css" media="screen" /&gt;
  &lt;link rel='stylesheet' media='screen and (max-device-width: 480px)' href='styles/mobile.css' type='text/css' /&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
  &lt;/head&gt;
  </code></pre>