Outlook.office.com (Office 365) conditional statement for hiding content not working
I am using a conditional statement for all versions of Outlook desktop/web email. I'm not sure if this link helps: https://www.htmlemailcheck.com/knowledge-base/recommended-externalclass-css-fix-outlook-com/
But, in mobile I am using a media query to show the ad in the content (so see ad higher up in the email) but also hide the same ad in the right rail when it wraps below the content.
The email has passed testing in the following:
iOS Third Party apps: Yahoo, Gmail, Outlook, iOS email -- content ad displays/right rail ad does not
Android 5 email -- content ad displays/right rail ad does not
Desktop: Mac OS X Outlook app (15.40) -- content ad does not display/right rail does
and PC Windows 7 Outlook Office 365 -- content ad does not display/right rail does
Web email Mac (FF 57) and PC (Chrome 62, IE 11) Yahoo, Gmail, AOL -- content ad does not display/right rail does
Here is the html:
<!--[if (gte mso 9)|(IE)]>
<div style="display:none;width:0px;height:0px;overflow:hidden;opacity: 0;mso-hide:all;">
<![endif]-->
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-spacing: 0;">
<tr>
<td align="center">
<!-- MedRectangle Advertising -->
<table class="open-mobile" width="100%" cellpadding="0" cellspacing="0" border="0" style="border-top-width: 1px; border-top-style: solid; border-top-color: #1a1a1a; mso-hide:all;">
<tr>
<td align="center" style="padding-top: 20px; padding-bottom: 4px; color: #999999;font-family: Helvetica, Arial, sans-serif; font-size: 9px; letter-spacing: 0.12em; line-height: 11px;">ADVERTISEMENT</td>
</tr>
<tr>
<td align="center" style="padding-bottom: 32px;"><a href="http://www.adtechus.com"><img src="http://pchan.nejm.org/NEJM-Refresh/eTOC-0717/alt-mobile_1117/pharma.png" alt="Advertisement" width="300" height="250" style="border-width: 0;" /></a></td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</div>
<![endif]-->
And here is the media query:
@media screen and (min-width: 728px) {
.webkit {
width: 728px !important;
}
.right-sidebar .left {
max-width: 403px;
}
.right-sidebar .right {
max-width: 320px;
}
.open-mobile {
display: none;
}
}
@media screen and (max-width: 728px) {
.hide-desktop {
display: none;
}
.open-mobile {
display: inline-block !important;
width: 100% !important;
height: 100% !important;
overflow: visible !important;
opacity: 100 !important;
}
}
And finally a link to a screen capture taken from my test Office 365 email: http://images.nejm.org/email/office-365.png
Appreciate your help.
Hi Mary,
Conditional comments (
<!--[if (gte mso 9)|(IE)]>) are for the desktop Windows versions of Outlook (2007, 2010, 2013, 2016). The.ExternalClassclass was present in previous versions of Outlook.com. But it's no longer of use since last year.Unfortunately, Outlook.com doesn't support media queries. So there's absolutely no way to distinguish a desktop version of an email from its mobile version when viewed in Outlook.com. So you can't hide content based on the device width in Outlook.com. However, if you prefer, you can your ad for Outlook.com completely (desktop and mobile) using a
[owa]attribute selector hack. Because Outlook.com doesn't support attribute selectors in CSS, it will filter them completely. This, it will make any rule prefixed by a bogus attribute selector work only in Outlook.com. Here's an example of<style>tag you can add in the<head>of your email :Thanks so much Remi. I will give this a try and let you know the results.
Have a wonderful Thanksgiving.
Thanks again.
Hi Remi,
Thanks again for all your help. The example you provided works like a charm!
Retested in all emails as noted above, retested in particular Outlook Mac, PC, Outlook.com, and iOS Outlook app and passed with flying colors.
Mary