I am experiencing an issue using the Desktop/Mobile show/hide functionality with [Zurb Ink email framework](http://zurb.com/ink/docs.php). 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](https://gist.github.com/Riveascore/10549334) 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](https://github.com/zurb/ink/blob/master/css/ink.css).