Skip to content

Commit 0aad15c

Browse files
TedGoasTedGoas
authored
Merge pull request #230 from TedGoas/responsive-iOS-Outlook
Fix responsive columns stacking in iOS Outlook
2 parents b5bee3c + 9043821 commit 0aad15c

File tree

1 file changed

+24
-19
lines changed

1 file changed

+24
-19
lines changed

‎cerberus-responsive.html‎

Lines changed: 24 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,11 @@
5858
mso-table-rspace: 0pt !important;
5959
}
6060

61+
/* What it does: Replaces default bold style. */
62+
th {
63+
font-weight: normal;
64+
}
65+
6166
/* What it does: Fixes webkit padding issue. */
6267
table {
6368
border-spacing: 0 !important;
@@ -221,7 +226,7 @@
221226
<!-- Create white space after the desired preview text so email clients don’t pull other distracting text into the inbox preview. Extend as necessary. -->
222227
<!-- Preview Text Spacing Hack : BEGIN -->
223228
<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;">
224-
&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;
229+
&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;
225230
</div>
226231
<!-- Preview Text Spacing Hack : END -->
227232

@@ -309,7 +314,7 @@ <h1 style="margin: 0 0 10px; font-size: 25px; line-height: 30px; color: #333333;
309314
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
310315
<tr>
311316
<!-- Column : BEGIN -->
312-
<td valign="top" width="50%" class="stack-column-center">
317+
<th valign="top" width="50%" class="stack-column-center">
313318
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
314319
<tr>
315320
<td style="padding: 10px; text-align: center">
@@ -322,10 +327,10 @@ <h1 style="margin: 0 0 10px; font-size: 25px; line-height: 30px; color: #333333;
322327
</td>
323328
</tr>
324329
</table>
325-
</td>
330+
</th>
326331
<!-- Column : END -->
327332
<!-- Column : BEGIN -->
328-
<td valign="top" width="50%" class="stack-column-center">
333+
<th valign="top" width="50%" class="stack-column-center">
329334
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
330335
<tr>
331336
<td style="padding: 10px; text-align: center">
@@ -338,7 +343,7 @@ <h1 style="margin: 0 0 10px; font-size: 25px; line-height: 30px; color: #333333;
338343
</td>
339344
</tr>
340345
</table>
341-
</td>
346+
</th>
342347
<!-- Column : END -->
343348
</tr>
344349
</table>
@@ -352,7 +357,7 @@ <h1 style="margin: 0 0 10px; font-size: 25px; line-height: 30px; color: #333333;
352357
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
353358
<tr>
354359
<!-- Column : BEGIN -->
355-
<td valign="top" width="33.33%" class="stack-column-center">
360+
<th valign="top" width="33.33%" class="stack-column-center">
356361
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
357362
<tr>
358363
<td style="padding: 10px; text-align: center">
@@ -365,10 +370,10 @@ <h1 style="margin: 0 0 10px; font-size: 25px; line-height: 30px; color: #333333;
365370
</td>
366371
</tr>
367372
</table>
368-
</td>
373+
</th>
369374
<!-- Column : END -->
370375
<!-- Column : BEGIN -->
371-
<td valign="top" width="33.33%" class="stack-column-center">
376+
<th valign="top" width="33.33%" class="stack-column-center">
372377
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
373378
<tr>
374379
<td style="padding: 10px; text-align: center">
@@ -381,10 +386,10 @@ <h1 style="margin: 0 0 10px; font-size: 25px; line-height: 30px; color: #333333;
381386
</td>
382387
</tr>
383388
</table>
384-
</td>
389+
</th>
385390
<!-- Column : END -->
386391
<!-- Column : BEGIN -->
387-
<td valign="top" width="33.33%" class="stack-column-center">
392+
<th valign="top" width="33.33%" class="stack-column-center">
388393
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
389394
<tr>
390395
<td style="padding: 10px; text-align: center">
@@ -397,7 +402,7 @@ <h1 style="margin: 0 0 10px; font-size: 25px; line-height: 30px; color: #333333;
397402
</td>
398403
</tr>
399404
</table>
400-
</td>
405+
</th>
401406
<!-- Column : END -->
402407
</tr>
403408
</table>
@@ -411,18 +416,18 @@ <h1 style="margin: 0 0 10px; font-size: 25px; line-height: 30px; color: #333333;
411416
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
412417
<tr>
413418
<!-- Column : BEGIN -->
414-
<td width="33.33%" class="stack-column-center">
419+
<th width="33.33%" class="stack-column-center">
415420
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
416421
<tr>
417422
<td dir="ltr" valign="top" style="padding: 0 10px;">
418423
<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;">
419424
</td>
420425
</tr>
421426
</table>
422-
</td>
427+
</th>
423428
<!-- Column : END -->
424429
<!-- Column : BEGIN -->
425-
<td width="66.66%" class="stack-column-center">
430+
<th width="66.66%" class="stack-column-center">
426431
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
427432
<tr>
428433
<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">
@@ -440,7 +445,7 @@ <h2 style="margin: 0 0 10px 0; font-family: sans-serif; font-size: 18px; line-he
440445
</td>
441446
</tr>
442447
</table>
443-
</td>
448+
</th>
444449
<!-- Column : END -->
445450
</tr>
446451
</table>
@@ -454,18 +459,18 @@ <h2 style="margin: 0 0 10px 0; font-family: sans-serif; font-size: 18px; line-he
454459
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
455460
<tr>
456461
<!-- Column : BEGIN -->
457-
<td width="33.33%" class="stack-column-center">
462+
<th width="33.33%" class="stack-column-center">
458463
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
459464
<tr>
460465
<td dir="ltr" valign="top" style="padding: 0 10px;">
461466
<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;">
462467
</td>
463468
</tr>
464469
</table>
465-
</td>
470+
</th>
466471
<!-- Column : END -->
467472
<!-- Column : BEGIN -->
468-
<td width="66.66%" class="stack-column-center">
473+
<th width="66.66%" class="stack-column-center">
469474
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
470475
<tr>
471476
<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">
@@ -483,7 +488,7 @@ <h2 style="margin: 0 0 10px 0; font-family: sans-serif; font-size: 18px; line-he
483488
</td>
484489
</tr>
485490
</table>
486-
</td>
491+
</th>
487492
<!-- Column : END -->
488493
</tr>
489494
</table>

0 commit comments

Comments
 (0)