title: media queries for smartphone portrait, landscape and desktop?
body: <p>I am trying to set different media queries for smartphone orientation and desktop, i want to target portrait and landscape. I am aware of all the other stack links such has:</p>
  <p><a href="https://stackoverflow.com/questions/14224913/media-query-to-target-most-of-smartphone">Media query to target most of smartphone</a>
  <a href="https://stackoverflow.com/questions/13910255/3-media-queries-for-iphone-portrait-landscape-and-ipad-portrait">3 media queries for iphone portrait, landscape and ipad portrait</a></p>
  <p>But I am still having issues, my landscape one isn't working, this is the code I am using:</p>
  <pre><code>Desktop css first
     -- css for desk --
  
  Portrait:
  
     @media only screen 
       and (min-device-width: 320px) 
       and (max-device-width: 479px) {
  
  }
  
  Landscape:
  
     @media only screen 
       and (min-device-width: 480px) 
       and (max-device-width: 640px) {
  
  }
  </code></pre>
  <p>The landscape code is like not even getting considered</p>