]> git.ipfire.org Git - thirdparty/foundation/foundation-emails.git/commitdiff
Explain how to hide element in email forwarded via MS Outlook 509/head
authorSergey Lukin <contact@sergeylukin.com>
Mon, 11 Jul 2016 14:51:15 +0000 (14:51 +0000)
committerSergey Lukin <contact@sergeylukin.com>
Mon, 11 Jul 2016 14:51:15 +0000 (14:51 +0000)
docs/pages/visibility.md

index 3ea2775650bca9fd928131554c3c6120b28364cc..b3e2153598cf865df61bc7395b594758b7357b82 100644 (file)
@@ -10,7 +10,7 @@ Visibility classes allow you to control what content appears on what screen size
 
 Foundation for Emails has two breakpoints: *small*, which is any email client under 596 pixels wide, and *large*, any client over 596 pixels. This means small generally correlates to mobile clients, and large correlates to desktop clients.
 
-Due to Outlook's lack of support for certain CSS properties, the Foundation for Emails visibility classes should be used in conjunction with conditional comments to ensure that the content is properly hidden (or shown) in Outlook 2007, 2010 and 2013.
+Due to Outlook's lack of support for certain CSS properties, the Foundation for Emails visibility classes should be used in conjunction with conditional comments to ensure that the content is properly hidden (or shown) in Outlook 2007, 2010, 2013 and 2016. For instance, in order to hide an element in MS Outlook as well as in e-mail forwarded from MS Outlook, make sure to wrap that element with `<!--[if !mso]><!-->` and `<!--<![endif]-->` conditional formatting.
 
 <div class="primary callout">
   <p>If you're using a visibility class on an image, be sure to apply it to the parent element, not to the image itself.</p>
@@ -21,11 +21,13 @@ Due to Outlook's lack of support for certain CSS properties, the Foundation for
 **To show content only on desktop clients,** add the class `.show-for-large` to the element.
 
 ```inky_example
+<!--[if !mso]><!-->
 <div class="hide-for-large">
   <callout class="primary">
     <p>This callout will only appear on small screens.</p>
   </callout>
 </div>
+<!--<![endif]-->
 
 <callout class="show-for-large alert">
   <p>This callout will only appear on large screens.</p>