media queries for smartphone portrait, landscape and desktop?

Question

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:

Media query to target most of smartphone 3 media queries for iphone portrait, landscape and ipad portrait

But I am still having issues, my landscape one isn't working, this is the code I am using:

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) {

}

The landscape code is like not even getting considered

Answer 1

Try adding

orientation : landscape

@media only screen and (min-device-width: 480px) 
                   and (max-device-width: 640px) 
                   and (orientation: landscape) {

//enter code here
}

See this site or this snippet for reference.