Skip to content

Commit

Permalink
Merge pull request #230 from TedGoas/responsive-iOS-Outlook
Browse files Browse the repository at this point in the history 
Fix responsive columns stacking in iOS Outlook
  • Loading branch information
@TedGoas
TedGoas authored Aug 15, 2019
2 parents b5bee3c + 9043821 commit 0aad15c
Showing 1 changed file with 24 additions and 19 deletions.
43 changes: 24 additions & 19 deletions cerberus-responsive.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,11 @@
mso-table-rspace: 0pt !important;
}

/* What it does: Replaces default bold style. */
th {
font-weight: normal;
}

/* What it does: Fixes webkit padding issue. */
table {
border-spacing: 0 !important;
Expand Down Expand Up @@ -221,7 +226,7 @@
<!-- Create white space after the desired preview text so email clients don’t pull other distracting text into the inbox preview. Extend as necessary. -->
<!-- Preview Text Spacing Hack : BEGIN -->
<div style="display: none; font-size: 1px; line-height: 1px; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden; mso-hide: all; font-family: sans-serif;">
&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;
&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;
</div>
<!-- Preview Text Spacing Hack : END -->

Expand Down Expand Up @@ -309,7 +314,7 @@ <h1 style="margin: 0 0 10px; font-size: 25px; line-height: 30px; color: #333333;
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<!-- Column : BEGIN -->
<td valign="top" width="50%" class="stack-column-center">
<th valign="top" width="50%" class="stack-column-center">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="padding: 10px; text-align: center">
Expand All @@ -322,10 +327,10 @@ <h1 style="margin: 0 0 10px; font-size: 25px; line-height: 30px; color: #333333;
</td>
</tr>
</table>
</td>
</th>
<!-- Column : END -->
<!-- Column : BEGIN -->
<td valign="top" width="50%" class="stack-column-center">
<th valign="top" width="50%" class="stack-column-center">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="padding: 10px; text-align: center">
Expand All @@ -338,7 +343,7 @@ <h1 style="margin: 0 0 10px; font-size: 25px; line-height: 30px; color: #333333;
</td>
</tr>
</table>
</td>
</th>
<!-- Column : END -->
</tr>
</table>
Expand All @@ -352,7 +357,7 @@ <h1 style="margin: 0 0 10px; font-size: 25px; line-height: 30px; color: #333333;
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<!-- Column : BEGIN -->
<td valign="top" width="33.33%" class="stack-column-center">
<th valign="top" width="33.33%" class="stack-column-center">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="padding: 10px; text-align: center">
Expand All @@ -365,10 +370,10 @@ <h1 style="margin: 0 0 10px; font-size: 25px; line-height: 30px; color: #333333;
</td>
</tr>
</table>
</td>
</th>
<!-- Column : END -->
<!-- Column : BEGIN -->
<td valign="top" width="33.33%" class="stack-column-center">
<th valign="top" width="33.33%" class="stack-column-center">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="padding: 10px; text-align: center">
Expand All @@ -381,10 +386,10 @@ <h1 style="margin: 0 0 10px; font-size: 25px; line-height: 30px; color: #333333;
</td>
</tr>
</table>
</td>
</th>
<!-- Column : END -->
<!-- Column : BEGIN -->
<td valign="top" width="33.33%" class="stack-column-center">
<th valign="top" width="33.33%" class="stack-column-center">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="padding: 10px; text-align: center">
Expand All @@ -397,7 +402,7 @@ <h1 style="margin: 0 0 10px; font-size: 25px; line-height: 30px; color: #333333;
</td>
</tr>
</table>
</td>
</th>
<!-- Column : END -->
</tr>
</table>
Expand All @@ -411,18 +416,18 @@ <h1 style="margin: 0 0 10px; font-size: 25px; line-height: 30px; color: #333333;
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<!-- Column : BEGIN -->
<td width="33.33%" class="stack-column-center">
<th width="33.33%" class="stack-column-center">
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td dir="ltr" valign="top" style="padding: 0 10px;">
<img src="https://via.placeholder.com/170" width="170" height="170" alt="alt_text" border="0" class="center-on-narrow" style="height: auto; background: #dddddd; font-family: sans-serif; font-size: 15px; line-height: 15px; color: #555555;">
</td>
</tr>
</table>
</td>
</th>
<!-- Column : END -->
<!-- Column : BEGIN -->
<td width="66.66%" class="stack-column-center">
<th width="66.66%" class="stack-column-center">
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td dir="ltr" valign="top" style="font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555; padding: 10px; text-align: left;" class="center-on-narrow">
Expand All @@ -440,7 +445,7 @@ <h2 style="margin: 0 0 10px 0; font-family: sans-serif; font-size: 18px; line-he
</td>
</tr>
</table>
</td>
</th>
<!-- Column : END -->
</tr>
</table>
Expand All @@ -454,18 +459,18 @@ <h2 style="margin: 0 0 10px 0; font-family: sans-serif; font-size: 18px; line-he
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<!-- Column : BEGIN -->
<td width="33.33%" class="stack-column-center">
<th width="33.33%" class="stack-column-center">
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td dir="ltr" valign="top" style="padding: 0 10px;">
<img src="https://via.placeholder.com/170" width="170" height="170" alt="alt_text" border="0" class="center-on-narrow" style="height: auto; background: #dddddd; font-family: sans-serif; font-size: 15px; line-height: 15px; color: #555555;">
</td>
</tr>
</table>
</td>
</th>
<!-- Column : END -->
<!-- Column : BEGIN -->
<td width="66.66%" class="stack-column-center">
<th width="66.66%" class="stack-column-center">
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td dir="ltr" valign="top" style="font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555; padding: 10px; text-align: left;" class="center-on-narrow">
Expand All @@ -483,7 +488,7 @@ <h2 style="margin: 0 0 10px 0; font-family: sans-serif; font-size: 18px; line-he
</td>
</tr>
</table>
</td>
</th>
<!-- Column : END -->
</tr>
</table>
Expand Down

0 comments on commit 0aad15c

Please sign in to comment.