Hi folks,

This is an extension of my recent post regarding sticky footers. I want to hide a fixed div when the phone is oriented to landscape mode, but show when in portrait.

My media queries look like this:

@media only screen and (max-device-width:480px) and (orientation: landscape){
[class].fixed {
display: none !important;
overflow: hidden !important;
}
}

@media only screen and (max-device-width:480px) and (orientation: portrait) {
[class].fixed {
position: fixed !important;
max-height: none !important;
bottom: 40px !important;
display: block !important;
overflow: visible !important;
}
}

And my div looks like this:

<div class="fixed" style="mso-hide:all;display:none;max-height:0px;overflow:hidden;opacity:0.95;background:#FFFFFF;border:1px solid #EAE9E9;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif">

This DOES work, but not initially. When I open the email up, the fixed bar does not show. But if I rotate to landscape and then back to portrait, it will display. Such odd behavior....

Thoughts?