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

diff --git a/docs/pages/visibility.md b/docs/pages/visibility.md
index 3f231e06d2d4eec5018fa56dbbe8c089579c6f68..3ea2775650bca9fd928131554c3c6120b28364cc 100644 (file)
--- 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 7af167adc919e36a0b99d1031541715a388b29ed..8f569daced07d2dd20e7a3d9e898d1edcd680fc2 100644 (file)
--- 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;