Problems with @media in Hotmail and Outlook?

Hi everyone,

Has anyone started to notice problems with using the @media tags in Hotmail and Outlook? I've been using them just fine for several months now, but all the sudden, I am getting occasional blank emails in Hotmail and Outlook. The strange part is that I can send the exact same HTML two times in a row, and one might be blank and the other will show up.

I think I've at least isolated the problem to only being HTML that includes @media, so here's my <head> tags for one that has shown up blank. Or I'm wondering if it has something to do with my Outlook targeting tag?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Message Title</title>
<style type="text/css">
body {width:100%;} 
.ReadMsgBody {width:100%;} 
.ExternalClass {width:100%;}
@media only screen and (max-device-width: 480px) {
.hide, div:not(#container) .hide {
    display: none !important;
}
.contentTable, div:not(#container) .contentTable {
    width: 100% !important;
}
.contentTable2, div:not(#container) .contentTable2 {
    background-color:#FFF; !important;
    width: 100% !important;
}
.headerPic, div:not(#container) .headerPic {
    width: 100% !important;
}
.logo, div:not(#container) .logo {
    width: 50% !important;
}
.nopadding, div:not(#container) .nopadding {
    padding:0 !important;
}
.button, div:not(#container) .button {
    width: 40% !important;
}
}
</style>
<!--[if gte mso 9]>
<style type="text/css">
ol {
   margin: 0 0 0 36px;
   padding: 0;
   list-style-position: outside;
}
</style>
<![endif]-->
</head>

But, like I said, I can send it two times in a row, and one will blank and the other will show. It's very strange. I've tried making the top three lines of style be a separate <style> tag from the @media <style> and it still happens.

Any ideas?

Thanks!

Matt

roshodgekiss roshodgekiss, 5 years ago

Hi Matt, welcome to the forums! It sounds like there may be an issue with the conditional comments - we've been sending out loads of newsletters lately with @media queries and haven't picked up any issues in Hotmail or Outlook as of yet.

Could you kindly let me know which version of Outlook you're seeing this in? Would be keen to test it out myself.


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

Ros,

I'm a long time fan and reader of your blog entries! Thank you so much for your help.

I'm using Outlook 2007.

Matt

carl.michael, 3 years ago

I've noticed that Outlook 2007 is ignoring one of my queries too.  Gmail is also showing the content.

All other mail clients are behaving as expected and not showing the content

Here is the extract of code that creates some social media links to only be shown in mobile versions of my email:

<style type="text/css">

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

table[class="socialMobile"] {
    display: block !important;
    border-radius: 2px !important;

    }
    
    
    
    }


table .socialMobile {
    display: none;
    }
</style>

<table cellpadding="0" cellspacing="0" class="socialMobile" border="1" bordercolor="#CCCCCC" >
    <tbody>
        <tr>
            <td width="330">
                <table cellpadding="10" cellspacing="10" class="howtoorder" align="center">
                    <tbody>
                        <tr>
                            
                            <td><img src="mydomain.com/twitter.jpg" width="40" height="40" alt="order online"></td>
                             <td class="bestsellersTitle" valign="middle"><h3>Follow us on Twitter</h3>
                                              <p><a href="https://twitter.com/#">@mytwitteraccount</a></p>                             </td>
                        </tr>
                        
                        <tr>
                        
                            <td><img src="mydomain.com/images/linkedin.jpg" width="40" height="40" alt="order online"></td>
                             <td class="bestsellersTitle" valign="middle"><h3>Join the</h3><a href="http://www.linkedin.com/groups/#">Official  Group</a> </td>
                            
                        </tr>
                        <tr>
                        <td><img src="mydomain.com/images/facebook.jpg" width="40" height="40" alt="order online"></td>
                        <td class="bestsellersTitle" valign="middle">
                                                                        <h3>Like us on</h3>
                                                                        <p><a href="https://www.facebook.com/#">Facebook</a></p>
                                               </td>
                        
                        </tr>
                        
                        
                    </tbody>
                </table>
            </td>
        </tr>
        
        
    </tbody>
</table>    
davidaf davidaf, 3 years ago

Hi carl.michael

There's a couple of things going on here. If you check out our Guide to CSS (download the full matrix) you'll see that there's no support for display in Gmail and Outlook. They simply ignore display:none (actually, I've discovered that Outlook will respect display:none on a <p> tag, but not a <table>).

Additionally, I noticed a couple of problems with your styles.

One is you can't have two max-widths defined in a single media query:

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

Take a look at this great reference for the media queries to use in different situations.

Secondly, your declaration here wouldn't work with the code you provided:

table .socialMobile

That would only apply to elements with a class of .socialMobile inside a parent table, and your table is stand-alone, not inside another table. It's simpler to just do a class declaration and apply it where you like:

.socialMoble {display:none;}

I do hope that helps carl.michael, let us know if we can help with anything else :)


The Campaign Monitor Blog – HTML email smarts to go with your good looks
rantin, 3 years ago

Is there anyway to hide to content all together if the email client doesn't support conditional comments?

So, par example, if I have 2 conditional comments one for mobile and one of handheld devices with a screen width bigger then 640px and a default one.
I want to email to show the default one if the client doesn't support conditional, is that possible?
http://redevils.go.ro/jocuri.png

roshodgekiss roshodgekiss, 3 years ago

Hi rantin, I think you may have to take a slightly different approach. With media queries, you can selectively display and hide content for mobile devices specifically - we have a chapter in our responsive email guide on how to do this.

What this means is that if conditions in the inbox don't meet those defined in the media query (ie. screen size > 640px in width), the 'default' stylesheet will be used instead.

I recommend reading through this guide, as you can likely solve this issue by tailoring media queries to taste. Of course, if you have any questions about this, be sure to get in touch :)


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

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