kindle fire @media

Question

I am trying to design an email that renders uniquely in the native Kindle Fire email client. I am able to pickup on the initial horizontal view using the following media query:

@media only screen and (min-device-width: 590px) and (max-device-width:1014px){
/*kindle*/
    #desktop { display:none}
    #kindle { display:block !important}
}                           

...

<div class="mobile" id="kindle" style="display:none">Kindle Fire</div>
<div id="desktop">This is the desktop view</div>

The problem is that when I rotate the device to landscape, the media query is lost, when I rotate it back it's still lost. I have tried using the orientation conditional statement but that doesn't seem to work at all. Anyone have any suggestions?

Answer 1

for orientation based CSS just use min-width or min-height. Do not use "device". That's what's hosing you up. Device queries do not detect orientation changes.

Answer 2

This seems to work for me for landscape view but I haven't checked it against other tablet devices.

/** Kindle Fire Landscape **/
@media only screen and (min-device-width : 600px) and (max-device-width: 1280px) {

}