updated visibility classes to respect display table-cell for table-cells

diff --git a/scss/components/_visibility.scss b/scss/components/_visibility.scss
index 3b969b38422e67b24c040abcdee8cbe83ca3a53b..7a8e27610e25a4b9f421a8c19449ef178526a9c0 100644 (file)
--- a/scss/components/_visibility.scss
+++ b/scss/components/_visibility.scss
@@ -6,8 +6,8 @@
 /// @group visibility
 ////
 
-table.body table.container .hide-for-large {
-  display: none;
+.hide-for-large {
+  display: none !important;
   width:0;
   mso-hide:all; // hide selected elements in Outlook 2007-2013
   overflow:hidden;
@@ -30,7 +30,7 @@ table.body table.container .hide-for-large * {
   mso-hide:all; // hide selected elements in Outlook 2007-2013
 }
 
-table.body table.container .row.hide-for-large,
+table.body table.container .hide-for-large,
 table.body table.container .row.hide-for-large {
   @media only screen and (max-width: #{$global-breakpoint}) {
     display: table !important;
@@ -38,6 +38,13 @@ table.body table.container .row.hide-for-large {
   }
 }
 
+table.body table.container .callout-inner.hide-for-large {
+  @media only screen and (max-width: #{$global-breakpoint}) {
+    display: table-cell !important;
+    width: 100% !important;
+  }
+}
+
 table.body table.container .show-for-large {
   @media only screen and (max-width: #{$global-breakpoint}) {
     display: none !important;

diff --git a/scss/settings/_settings.scss b/scss/settings/_settings.scss
index 039cd81ce76831ace32d265696e5f65e87b75b89..696265e77959b34708827029bef4e8cdedaa7f16 100644 (file)
--- a/scss/settings/_settings.scss
+++ b/scss/settings/_settings.scss
@@ -32,8 +32,6 @@ $global-width-small: 95%;
 $global-gutter: 16px;
 $body-background: $light-gray;
 $container-background: $white;
-$global-font-color: $black;
-$body-font-family: Helvetica, Arial, sans-serif;
 $global-padding: 16px;
 $global-margin: 16px;
 $global-radius: 3px;
@@ -55,6 +53,8 @@ $block-grid-gutter: $global-gutter;
 // 4. Typography
 // -------------
 
+$global-font-color: $black;
+$body-font-family: Helvetica, Arial, sans-serif;
 $global-font-weight: normal;
 $header-color: inherit;
 $global-line-height: 1.3;

diff --git a/test/visual/pages/visibility.html b/test/visual/pages/visibility.html
index 8a7c5b076ffd2c9744256972fa4530f94363a936..b7ec3a09b2125e57843fb97685fa0e62bb72158a 100644 (file)
--- a/test/visual/pages/visibility.html
+++ b/test/visual/pages/visibility.html
@@ -73,6 +73,40 @@
     </columns>
   </row>
 
+  <row>
+    <columns small="12" large="12">
+      <callout class="primary">
+        <h1>Show on all</h1>
+        <p>Calling all cars</p>
+        <p>Calling all cars</p>
+        <p>Calling all cars</p>
+      </callout>
+    </columns>
+  </row>
+
+  <row>
+    <columns small="12" large="12">
+      <callout class="primary hide-for-large">
+        <h1>Hide for Large</h1>
+        <p>Calling all cars</p>
+        <p>Calling all cars</p>
+        <p>Calling all cars</p>
+      </callout>
+    </columns>
+  </row>
+
+  <row>
+    <columns small="12" large="12">
+      <callout class="primary show-for-large">
+        <h1>Show for Large</h1>
+        <p>Calling all cars</p>
+        <p>Calling all cars</p>
+        <p>Calling all cars</p>
+      </callout>
+    </columns>
+  </row>
+
+
   <row class="callout">
     <columns small="6" large="4">
       <p class="hide-for-large">Show for small</p>