adds css property to visibility for better coverage on yahoo

diff --git a/scss/components/_visibility.scss b/scss/components/_visibility.scss
index e6e208ce97a755dc7c928a53f68ba76e777ef142..d2eeaa1aac1ebd556f67b77efbd0212353d51b4c 100644 (file)
--- a/scss/components/_visibility.scss
+++ b/scss/components/_visibility.scss
@@ -6,33 +6,52 @@
 /// @group visibility
 ////
 
-table.body .hide-for-large {
-  display: none !important;
+table.body table.container .hide-for-large {
+  display: none;
   width:0;
-  mso-hide:all;
+  mso-hide:all; // hide selected elements in Outlook 2007-2013
   overflow:hidden;
+  max-height: 0px; 
+  font-size: 0;
+  width: 0px;
+  line-height: 0; 
 
   @media only screen and (max-width: #{$global-breakpoint}) {
-    display: inherit !important;
+    display: block !important;
+    width: auto !important;
+    overflow: visible !important;
   }
 }
 
-table.body .row.hide-for-large,
-table.body .row.hide-for-large {
+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 .row.hide-for-large {
   @media only screen and (max-width: #{$global-breakpoint}) {
     display: table !important;
-    width: 100%;
+    width: 100% !important;
   }
 }
 
-table.body .show-for-large {
+table.body table.container .show-for-large {
   @media only screen and (max-width: #{$global-breakpoint}) {
     display: none !important;
     width:0;
-    mso-hide:all;
+    mso-hide:all; // hide selected elements in Outlook 2007-2013
     overflow:hidden;
   }
 }
 
-
+// [todo] add image resets
+// img {
+//   max-height: 0;
+//   width: 0;
+// }
+// in media query
+// img { 
+//   max-height: none !important; 
+//   width: auto !important; 
+// }
 

diff --git a/testing/src/pages/kitcat.html b/testing/src/pages/kitcat.html
index c52185ef05abf6b05af30fea17b084ad901ca92d..edafd5c8bcdd143f6ca345a8dcc22c61e8bcb5a5 100644 (file)
--- a/testing/src/pages/kitcat.html
+++ b/testing/src/pages/kitcat.html
@@ -3,7 +3,7 @@
     <row>
       <columns small="12" large="12">
         <center>
-          <img class="float-center" src="http://placehold.it/150x50" alt="">
+          <img src="http://placehold.it/150x50" alt="">
         </center>
       </columns>
     </row>