Search code examples
htmlcssoutlookzurb-inkresponsive-emails

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

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.

Solution

  • 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.