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

Revisions

  1. ethyde created this gist Jan 20, 2016.
    92 changes: 92 additions & 0 deletions newsletter_two-columns.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,92 @@
    <!-- 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 -->