adds small-expanded css

Author: RafiBomb

scss/components/_media-query.scss

@@ -101,7 +101,8 @@
       display: inline-block !important;
     }
 
-    &.vertical, &.small-vertical {
+    &.vertical, 
+    &.small-vertical {
       td,
       th {
         display: block !important;
@@ -113,5 +114,27 @@
   table.menu[align="center"] {
     width: auto !important;
   }
+
+
+  // expands buttons for small only
+  table.button.small-expand,
+  table.button.small-expanded {
+    width: 100% !important;
+
+    table {
+      width: 100%;
+
+      a {
+        text-align: center !important;
+        width: 100% !important;
+        padding-left: 0 !important;
+        padding-right: 0 !important;
+      }
+    }
+
+    center {
+      min-width: 0;
+    }
+  }
 }
 

test/visual/pages/button-inky.html

@@ -4,6 +4,7 @@
   }
 </style>
 <container>
+<a href="https://litmus.com/checklist/emails/public/52b6fb8">Test Results - Passing 6/8/1016</a>
   <row>
     <columns small="12" large="12">
       <center>
@@ -53,6 +54,23 @@
   </row>
   <row>
     <columns small="12" large="12">
+    Expand small only with center tag
+      <center>
+        <button href="http://zurb.com" href="http://zurb.com" class="small-expand">Expand small only</button>
+      </center>
+    </columns>
+  </row>
+  <row>
+    <columns small="12" large="12">
+    Expand small only
+      <center>
+        <button href="http://zurb.com" href="http://zurb.com" class="small-expand">Expand small only</button>
+      </center>
+    </columns>
+  </row>
+  <row>
+    <columns small="12" large="12">
+    <center>
       <button href="http://zurb.com" href="http://zurb.com" class="expand">I expand and have lots of text</button>
     </columns>
   </row>