From: Sergey Lukin <contact@sergeylukin.com>
Date: Wed, 6 Jul 2016 07:57:45 +0000 (+0000)
Subject: Fix hide-for-large in Gmail, Yahoo and Outlook 2016
X-Git-Tag: v2.3.0~7^2~55^2~1
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=fdf6b4ee7e800c2cac4f3917003f748e59d85451;p=thirdparty%2Ffoundation%2Ffoundation-emails.git

Fix hide-for-large in Gmail, Yahoo and Outlook 2016
---

diff --git a/docs/pages/visibility.md b/docs/pages/visibility.md
index 3f231e06..3ea27756 100644
--- a/docs/pages/visibility.md
+++ b/docs/pages/visibility.md
@@ -16,18 +16,18 @@ Due to Outlook's lack of support for certain CSS properties, the Foundation for
   <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>
 </div>
 
-**To show content only on mobile clients,** add the class `.hide-for-large` to the element.
+**To show content only on mobile clients,** add the class `.hide-for-large` to a div wrapping the element that needs to be hidden.
 
 **To show content only on desktop clients,** add the class `.show-for-large` to the element.
 
 ```inky_example
-<callout class="hide-for-large primary">
-  <p>This callout will only appear on small screens.</p>
-</callout>
+<div class="hide-for-large">
+  <callout class="primary">
+    <p>This callout will only appear on small screens.</p>
+  </callout>
+</div>
 
 <callout class="show-for-large alert">
   <p>This callout will only appear on large screens.</p>
 </callout>
 ```
-
-*note - `.hide-for-large` is not supported on Gmail and Yahoo email clients.*
\ No newline at end of file
diff --git a/scss/components/_visibility.scss b/scss/components/_visibility.scss
index 7af167ad..8f569dac 100644
--- a/scss/components/_visibility.scss
+++ b/scss/components/_visibility.scss
@@ -7,7 +7,7 @@
 ////
 
 .hide-for-large {
-  display: none !important;
+  display: none;
   mso-hide: all; // hide selected elements in Outlook 2007-2013
   overflow: hidden;
   max-height: 0;