Hiding content in GMail and Outlook not working with Zurb Ink implementation

Question

I am experiencing an issue using the Desktop/Mobile show/hide functionality with Zurb Ink email framework. When I use the CSS below it works correctly in GMail, where the mobile content is hidden and only desktop is shown, but not in Outlook. However, with the default Ink CSS (where there is no !important flag on the display: none) it works in Outlook but not in GMail. I am using Outlook 2010.

I have taken some inspiration from this Gist and i'm using this CSS:

div.gmail .show-for-small,
div.gmail .hide-for-desktop {
    display : none !important;
    mso-hide: all !important;
}

This is my email markup:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <meta name="viewport" content="width=device-width"/>
        <style type="text/css">
            <!-- my inline styles in here -->
        </style>
    </head>
    <body>
    <!--[if !mso]><!-->
    <div class="gmail">
    <!--<![endif]-->
    <table class="body">...</table>
    <!--[if !mso]><!-->
    </div>
    <!--<![endif]-->
    </body>

What am I missing?

Zurb has one breakpoint and that being at 600px, so I don't want to change that. The Ink CSS provided by Zurb can be seen here.

score 2 · Accepted Answer · answered Sep 24 '15 at 16:32

I'll post an answer myself as I eventually got to the bottom of it (for GMail, Mobile iOS and Outlook support at least).

Still sticking with Ink's default classes I changed the visibility classes to:

.show-for-small,
.hide-for-desktop {
    display     : none;
    max-height  : 0;   /* Gmail */
    mso-hide    : all;  /* Outlook clients */
    overflow    : hidden;  /* Generic */
    font-size   : 0 !important;  /* Be careful with this one, only use if absolutely required */
    line-height : 0;
    padding     : 0 !important;
}

and then in the "mobile" view at the 600px breakpoint I done this to essentially reverse the changes I made above out:

@media only screen and (max-width : 600px) {
    table[class="body"] .show-for-small,
    table[class="body"] .hide-for-desktop {
        display     : block !important;
        max-height  : 100% !important; /* Gmail */
        mso-hide    : none !important; /* Outlook clients */
        overflow    : visible !important; /* Generic */
        font-size   : 14px !important; /* Be careful with this one, only use if absolutely required */
        line-height : 100% !important;
        height      : 100% !important;
        width       : 100% !important;
    }
}

I hope this helps someone working with Zurb Ink 1 and fingers crossed Zurb sort out this issue in Foundation for Emails on its release.

Could you elaborate on the logic and possibly sources behind the style changes? — aaandre, Nov 20 '15 at 07:22

score 0 · Answer 2 · answered Aug 01 '16 at 20:06

0

I use this to hide mobile-only content in outlook

<!--[if !mso]><\!-->
Mobile Only Content
<!-- <![endif]-->

Everything inside the if block does not get rendered in Outlook.

answered Aug 01 '16 at 20:06

chiliNUT

18,989
14
66
106

Hiding content in GMail and Outlook not working with Zurb Ink implementation

2 Answers2