Mobile version showing in Outlook.com on IE9

I've created a template for a client to have both a desktop and mobile version in the same HTML, using media queries and conditional comments in the head. I have just today noticed, that when using IE9, testing emails sent to Outlook.com are showing only the mobile version.

Here is an example of the head content:

<!--[if gte mso 9]>
<style>
.nooutlook {display:none !important;} 
</style>
<![endif]-->

 @media only screen and (max-width: 480px) {
div[class=mobile] {
    display: block !important;
    max-height: 100% !important;
    margin: 0;
    padding: 0;
    overflow : visible !important;
    width: auto !important;
    float: none !important;
}
div[class=desktop] {
    display : none !important;
}

Here is an example of body content:

<!-- DESKTOP -->
<div class="desktop">
    <table align="center" border="0" cellpadding="0" cellspacing="0" width="664">
        <tr>
            <td width="664">
                <a href="" target="_blank"><img src="desktop_image.jpg" width="664" height="214" alt="" title="" style="display:block; border:0px; padding:0px; margin:0px;"></a>
            </td>
        </tr>
    </table>
</div>

<!-- MOBILE -->
<div class="mobile" style="max-height:0; width:0; overflow:hidden; float:left; display:none;">
    <table align="center" border="0" cellpadding="0" cellspacing="0" width="331" class="nooutlook">
        <tr>
            <td width="331">
                <a href="" target="_blank"><img src="mobile_image.jpg" width="331" height="415" alt="" title="" style="display:block; border:0px; padding:0px; margin:0px;"></a>
            </td>
        </tr>
    </table>
</div>
roshodgekiss roshodgekiss, 3 years ago

Hi there mgriffioen, after testing our newsletter, I noticed that Outlook.com has flaky media query support - while some elements will adapt, others won't. However, this only happens when the preview pane is narrowed down to the max-width value, thus validating the mq expression.

To prevent this, you'll want to change:

@media only screen and (max-width: 480px) {

to 

@media only screen and (max-device-width: 480px) {

Alternately, you can use the workaround described here.

Thanks, mgriffioen - I hope this solves your issue, but let us know how you go. Best of luck!


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
mgriffioen, 3 years ago

So far, it looks like that may have done the trick. Thanks for the tip!

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098