width: 100% !important;
}
-
- //Rules for the Center Tag
- @for $i from 1 through ($grid-column-count - 1) {
- .body .columns td.small-#{$i},
- .body .column td.small-#{$i},
- td.small-#{$i} center,
-
- .body .columns th.small-#{$i},
- .body .column th.small-#{$i},
- th.small-#{$i} center {
- display: inline-block !important;
- width: -zf-grid-calc-pct($i, $grid-column-count) !important;
- }
- }
-
@for $i from 1 through ($grid-column-count - 1) {
table.body td.small-offset-#{$i},
table.body th.small-offset-#{$i} {
}
}
- //Centers the menus!
+ // Centers the menus!
table.menu[align="center"] {
width: auto !important;
}
- //Buttons
+ // Buttons
table.button.expand {
width: 100% !important;
}
+<style>
+ .columns {
+ border: 1px solid dodgerblue;
+ }
+</style>
+
<container>
<row>
- <th class="small-4 large-4 columns first">
+ <columns class="small-4 large-4 columns first">
<center>Centered Text</center>
- </th>
- <th class="small-4 large-4 columns">
+ </columns>
+ <columns class="small-4 large-4 columns">
<center>Centered Text</center>
- </th>
- <th class="small-4 large-4 columns last">
+ </columns>
+ <columns class="small-4 large-4 columns last">
<center>Centered Text</center>
- </th>
+ </columns>
</row>
</container>
<p class="text-left">Left Text</p>
<h4 class="text-left">Left Text</h4>
<br>
+ <p>Center on all clients</p>
<center>
<img src="http://placehold.it/200?text=center" alt="">
</center>
<br>
+ <p>Center on all clients except Outlook 20017, 10, 13</p>
<img class="float-center" src="http://placehold.it/200?text=center" alt="">
<img class="float-right" src="http://placehold.it/200?text=right" alt="">
<img class="float-left" src="http://placehold.it/200?text=left" alt="">
<container>
<row>
- <columns></columns>
- <columns>Centering a column</columns>
- <columns></columns>
+ <columns small="4"></columns>
+ <columns small="4">Centering a column</columns>
+ <columns small="4"></columns>
</row>
+
+ <center>
+ <button href="some-place">Center Button</button>
+ </center>
+
+ <row>
+ <columns small="6" large="6">
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae error nam, sequi culpa deleniti aperiam saepe, similique laborum corrupti vitae iste mollitia reiciendis corporis qui, quae possimus eos quidem nostrum.</p>
+ <center>
+ <button href="some-place">Center Always</button>
+ </center>
+ </columns>
+ <columns small="6" large="6">
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae error nam, sequi culpa deleniti aperiam saepe, similique laborum corrupti vitae iste mollitia reiciendis corporis qui, quae possimus eos quidem nostrum.</p>
+ <center>
+ <button href="some-place">Center Always</button>
+ </center>
+ </columns>
+ </row>
+
</container>
+<style>
+ .columns {
+ border: 1px solid dodgerblue;
+ }
+</style>
+
<container>
<row>
<columns small="12" large="12" class="text-center">
</center>
</columns>
</row>
+ <row>
+ <columns small="6" large="6" class="text-center">
+ <center>
+ <img src="http://placehold.it/150">
+ </center>
+ </columns>
+ <columns small="6" large="6" class="text-center">
+ <center>
+ <img src="http://placehold.it/150">
+ </center>
+ </columns>
+ </row>
</container>
table.body {
background: red !important;
}
+ .columns {
+ border: 1px solid dodgerblue;
+ }
</style>
<container>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit totam quasi ab aliquam saepe non fugiat laborum, veniam corporis alias impedit est nesciunt. Provident numquam cum libero vero minus fuga.</p>
</columns>
</row>
- <row class="collapse">
- <columns small="12" large="12">
- <p>This is a collapse column sit amet, consectetur adipisicing elit. Suscipit totam quasi ab aliquam saepe non fugiat laborum, veniam corporis alias impedit est nesciunt. Provident numquam cum libero vero minus fuga.</p>
- </columns>
- </row>
<row>
<columns small="12" large="6">
<p>One Word</p>