Skip to content

Instantly share code, notes, and snippets.

@ethyde

ethyde/newsletter_two-columns.html

Created January 20, 2016 18:43
Show Gist options
  • Save ethyde/33cc0b05c373f94fd65c to your computer and use it in GitHub Desktop.
Save ethyde/33cc0b05c373f94fd65c to your computer and use it in GitHub Desktop.
Download ZIP
From Cerberus mail : http://tedgoas.github.io/Cerberus/
Raw
newsletter_two-columns.html
<!-- Progressive Enhancements -->
<style>
/* Media Queries */
@media screen and (max-width: 480px) {
/* What it does: Forces table cells into full-width rows. */
.stack-column {
display: block !important;
width: 100% !important;
max-width: 100% !important;
direction: ltr !important;
}
}
</style>
<!-- Two Even Columns : BEGIN -->
<tr>
<td bgcolor="#ffffff" align="center" height="100%" valign="top" width="100%">
<!--[if mso]>
<table border="0" cellspacing="0" cellpadding="0" align="center" width="660">
<tr>
<td align="center" valign="top" width="660">
<![endif]-->
<table border="0" cellpadding="0" cellspacing="0" align="center" width="100%" style="max-width:660px;">
<tr>
<td align="center" valign="top" style="font-size:0; padding: 10px 0;">
<!--[if mso]>
<table border="0" cellspacing="0" cellpadding="0" align="center" width="660">
<tr>
<td align="left" valign="top" width="330">
<![endif]-->
<div style="display:inline-block; margin: 0 -2px; width:100%; min-width:200px; max-width:330px; vertical-align:top;" class="stack-column">
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="padding: 10px 10px;">
<table cellspacing="0" cellpadding="0" border="0" width="100%" style="font-size: 14px;text-align: left;">
<tr>
<td>
<img src="http://placehold.it/310" width="310" alt="" style="border: 0;width: 100%;max-width: 310px;" class="center-on-narrow">
</td>
</tr>
<tr>
<td style="font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555; padding-top: 10px;" class="stack-column-center">
Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td>
<td align="left" valign="top" width="330">
<![endif]-->
<div style="display:inline-block; Margin: 0 -2px; width:100%; min-width:200px; max-width:330px; vertical-align:top;" class="stack-column">
<table width="100%">
<tr>
<td style="padding: 10px 10px;">
<table cellspacing="0" cellpadding="0" border="0" width="100%" style="font-size: 14px;text-align: left;">
<tr>
<td>
<img src="http://placehold.it/310" width="310" alt="" style="border: 0;width: 100%;max-width: 310px;" class="center-on-narrow">
</td>
</tr>
<tr>
<td style="font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555; padding-top: 10px;" class="stack-column-center">
Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<!-- Two Even Columns : END -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment