Yahoo no longer supports display:none;

I'm buildling a responsive design email.  Previously, I used display: none; in CSS and @media queries to hide elements of my email for mobile and desktop.  It seems last month Yahoo took away the ability to use display none.  I have tried visibility: hidden, but this does nto work.  Any suggestions

https://litmus.com/community/discussions/815-yahoo-no-longer-supports-display-none

Stephen, 2 years ago

Hi 123Welcome,

Thanks for your question and we feel your pain here, we assure you!

What you may perhaps wish to try here is using a CSS class of:

.hide { max-height: 0px; font-size: 0; display: none; }

Which is taken from our "How to display email content in mobile clients only" blog post, so perhaps give that a go and let us know how you get on here! :)

123Welcome, 2 years ago

<html>
<head>
<meta name="HandheldFriendly" content="true">
<meta name="viewport" content="width=device-width; initial-scale=0.666667; maximum-scale=0.666667; user-scalable=0;">
<meta name="viewport" content="width=device-width">

<style media="all" type="text/css">
body, div, span, p, a, li, td { -webkit-text-size-adjust:none; }
.apple_link_footer a { text-decoration: none; color: #666666; }
.apple_link a { text-decoration: none; color: #000001; }
.cust_id_footer a { text-decoration: none; color: #ffffff; }
.ExternalClass * { line-height: 100%; }

.desktop_hide {
    display: block !important;
    font-size: 13px !important;
    max-height: none !important;
    line-height: 14px !important;
}
.mobile_hide {
    mso-hide: all !important;
    display: none !important;
    font-size: 0 !important;
    max-height: 0 !important;
    line-height: 0 !important;
}

@media only screen and (max-device-width: 480px) {
.desktop_hide {
    mso-hide: all !important;
    display: none !important;
    font-size: 0 !important;
    max-height: 0 !important;
    line-height: 0 !important;
}
.mobile_hide {
    display: block !important;
    font-size: 13px !important;
    max-height: none !important;
    line-height: 14px !important;
    width: auto !important;
}
}


/* Galaxy S4 */
@media only screen and (-webkit-min-device-pixel-ratio : 3){
.desktop_hide {
    mso-hide: all !important;
    display: none !important;
    font-size: 0 !important;
    max-height: 0 !important;
    line-height: 0 !important;
}
.mobile_hide {
    display: block !important;
    font-size: 13px !important;
    max-height: none !important;
    line-height: 14px !important;
    width: auto !important;
}
}

</style>
</head>
<body bgcolor="#FFFFFF">
<!-- BEGIN DESKTOP VERSION -->

<table width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="desktop_hide">
<tr>
    <td valign="top" align="center" width="601" height="5">Desktop version</td>
</tr>
</table>

<!-- END DESKTOP VERSION -->

<!-- BEGIN MOBILE VERSION -->
<div class="mobile_hide" style="font-size: 0; max-height: 0; overflow: hidden; line-height: 0; mso-hide: all; display: none;">
<table width="320" cellpadding="0" cellspacing="0" border="0" align="center" class="mobile_hide">
<tr>
    <td valign="top" align="center" width="320" height="5">Mobile version</td>
</tr>
</table>
</div>
<!-- END MOBILE VERSION -->

</body>
</html>

123Welcome, 2 years ago

Above is a simplified version of my code.  It works on everything except desktop version on Yahoo in Firefox & Chrome.  I do have the code you suggested, as my template was originally from campaign monitor.

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