title: Responsive web design and media queries for iPad Portrait not showing any changes when re-sizing window
body: <p>I am looking to add some responsive web design to my site for iPad Portrait. I have my main css file (style.css) and then i have added the line below:</p>
  
  <pre><code>&lt;link rel="stylesheet" href="ipad-portrait.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)" /&gt;
  </code></pre>
  
  <p>However when i try to set a div's background colour to red or something then resize the window i cannot see any change when it gets to the iPad Portrait size. </p>
  
  <p>The stylesheet im linking to looks like: </p>
  
  <pre><code>/* iPads (portrait) ----------- */
  @media only screen 
  and (min-device-width : 768px) 
  and (max-device-width : 1024px) 
  and (orientation : portrait) {
  /* Styles */
  
  .myTile{background:red;}
  
  }
  </code></pre>
  
  <p>I have tried it with and without this and no difference when i resize.</p>
  
  <p>What am I doing wrong?</p>
  
  <p>Any help would be great, I am just picking up responsive design.</p>
  
  <p>Thanks</p>