• Features
    All Features Email Previews
    Builder Checklist Spam Testing Email Analytics Litmus Extension
  • Pricing
  • Resources
    Resources Litmus Conference Convince Your Team Gmail Promotions Builder
  • Enterprise
  • Community
    Discussions Snippets Templates Jobs
  • Blog
  • Sign In
  • Litmus
  • Features
  • Pricing
  • Resources
  • Enterprise
  • Blog
  • Community
  • Discussions
  • Snippets
  • Templates
  • Jobs
  • My Account
  • Sign In
  • Community Home
  • Discussions
  • Learning
  • Snippets
  • Templates
  • Jobs
Avatar of Max PalmerMP

Max Palmer

  • Digital cowboy at Prudential Financial
  • Shelton, CT

Actually: Wrangler of all things digital Officially: Manager, Digital Design, Annuities Marketing, Prudential Financial

Joined on December 16, 2015

    Started a new discussion: How to prevent blocked images from turning into huge chunky squares in Outlook? 2018-03-29 18:00:20

    Started a new discussion: Swapping directions of nested tables? 2017-08-07 16:14:39

    Started a new discussion: Swapping direction of nested tables? 2017-08-07 16:10:05

    Replied to Discussion: Flabbergasted About What to do Regarding Inlining by Max Palmer 2017-06-08 12:21:12

    You can tell me! Although I'm glad it turned out to be an inliner issue, and not a code issue. Less stress for me. :-)

    Replied to Discussion: Flabbergasted About What to do Regarding Inlining by Max Palmer 2017-06-07 16:56:37

    So it turns out, that it seems to be the fault of the inliner I was using, Premailer. I had Litmus perform client previews using their own inlining feature, and it works fine. Sheesh!

    Replied to Discussion: Flabbergasted About What to do Regarding Inlining by Max Palmer 2017-06-06 12:37:24

    Well, according to Litmus' test, the only issue seems to be with Android- but I was under the impression that inlining for Gmail was a thing of the past. So, shouldn't style in the head work for Gmail on Android now? Looking at my second example below, what reason would there be for my emails not displaying as mobile version on Android when they aren't inlined?

    Replied to Discussion: Flabbergasted About What to do Regarding Inlining by Max Palmer 2017-06-05 17:31:46

    Here is an example of what one of my email sections should look like:
    http://i.imgur.com/WWoi8cw.jpg

    Here is what it looks like in Litmus' GMAIL Imap APP on Android (no styles, or padding) :
    http://i.imgur.com/3h3dryK.jpg

    And here is what it looks like when I inline it with premailer (it just makes it the mobile version):
    http://i.imgur.com/aV2lb5o.jpg

    Replied to Discussion: Flabbergasted About What to do Regarding Inlining by Max Palmer 2017-06-05 12:44:33

    Here it is! Appreciate any advice.

    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html lang="en">
    
    <head>
        <title></title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width"> 
    
    <style>
        #outlook a {
          padding: 0; }
    
        .ReadMsgBody {
          width: 100%; }
    
        .ExternalClass {
          width: 100%;
          line-height: 100%; }
          .ExternalClass p,
          .ExternalClass span,
          .ExternalClass font,
          .ExternalClass td,
          .ExternalClass div {
            line-height: 100%; }
    
        img {
          -ms-interpolation-mode: bicubic; }
    
        * img[tabindex="0"] + div {
          display: none !important; }
    
        body {
          background-color: #ffffff;
          margin: 0;
          padding: 0; }
          @media screen and (max-width: 500px) {
            body {
              -webkit-text-size-adjust: none;
              -webkit-text-size-adjust: 100%;
              -ms-text-size-adjust: 100%; } }
    
        img {
          height: auto;
          border: 0;
          outline: none;
          text-decoration: none; }
    
        table,
        td {
          border: 0;
          border-collapse: collapse !important;
          mso-table-lspace: 0 !important;
          mso-tablerspace: 0 !important;
          padding: 0;
          font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; }
          @media screen and (max-width: 500px) {
            table,
            td {
              -webkit-text-size-adjust: 100%;
              -ms-text-size-adjust: 100%; } }
    
        body {
          width: 100% !important;
          height: 100% !important;
          margin: 0;
          padding: 0; }
    
        .appleBody a {
          color: #68440a;
          text-decoration: none; }
    
        .appleFooter a {
          color: #999999;
          text-decoration: none; }
    
        @media screen and (max-width: 500px) {
          a {
            -webkit-text-size-adjust: 100%;
            -ms-text-size-adjust: 100%; } }
    
        /** Pru Colors */
        a {
          color: #007bc3;
          text-decoration: none; }
          a:hover {
            color: #00619a;
            background-color: #98c3de;
            border-radius: 3px; }
          a .link-text {
            text-decoration: underline; }
    
        .arrow {
          padding-right: 5px !important;
          padding-top: 5px !important;
          font-size: 12px !important;
          text-decoration: none !important; }
    
        .button {
          display: block;
          line-height: 1.428571429;
          color: #ffffff;
          text-align: center;
          border: 1px solid #007bc3;
          font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
          font-size: 15px;
          text-decoration: none;
          padding: 10px 10px; }
          .button:hover {
            color: #ffffff;
            background-color: #00619a; }
    
        .button-container {
          text-align: center;
          background-color: #007bc3; }
    
        .button-container-yellow {
          background-color: #ffd200; }
          .button-container-yellow .button {
            color: #333333;
            border: 1px solid #ffd200; }
            .button-container-yellow .button:hover {
              color: #333333;
              background-color: #d6b000;
              border: 1px solid #d6b000; }
    
        .rounded-large {
          -webkit-border-radius: 6px;
          -moz-border-radius: 6px;
          border-radius: 6px;
          overflow: hidden; }
    
        .rounded-small {
          -webkit-border-radius: 3px;
          -moz-border-radius: 3px;
          border-radius: 3px;
          overflow: hidden; }
    
        .section-padding {
          padding: 25px 0px 25px 0px; }
          @media screen and (max-width: 500px) {
            .section-padding {
              padding: 25px 10px; } }
    
        .section-padding-small-top {
          padding: 10px 0px 25px 0px; }
          @media screen and (max-width: 500px) {
            .section-padding-small-top {
              padding: 10px 10px 25px 10px; } }
    
        .section-padding-small-bottom {
          padding: 25px 0px 10px 0px; }
          @media screen and (max-width: 500px) {
            .section-padding-small-bottom {
              padding: 25px 10px 25px 10px; } }
    
        .section-padding-large-top {
          padding: 25px 0px 10px 0px; }
          @media screen and (max-width: 500px) {
            .section-padding-large-top {
              padding: 25px 10px 25px 10px; } }
    
        .section-padding-large-bottom {
          padding: 10px 0px 25px 0px; }
          @media screen and (max-width: 500px) {
            .section-padding-large-bottom {
              padding: 10px 10px 25px 10px; } }
    
        .section-padding-small {
          padding: 10px 0px 10px 0px; }
          @media screen and (max-width: 500px) {
            .section-padding-small {
              padding: 10px 10px; } }
    
        .margin {
          padding: 5px 0 5px 0; }
    
        .preheader {
          display: none;
          width: 0px;
          height: 0px;
          line-height: 0;
          color: #ffffff;
          opacity: 0;
          max-width: 0px;
          max-height: 0px;
          font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
          overflow: hidden; }
    
        .preheader-wrapper {
          padding: 25px 0 0 0; }
          @media screen and (max-width: 500px) {
            .preheader-wrapper {
              width: 100%;
              padding: 0px 0px 0 0px; } }
    
        .yellow {
          color: #ffd200; }
    
        .lead-in {
          color: #007bc3;
          text-align: center;
          font-size: 26px;
          line-height: 1.428571429;
          font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
          font-weight: normal; }
          @media screen and (max-width: 430px) {
            .lead-in {
              font-size: 20.8px; } }
    
        .body-copy {
          color: #333333;
          text-align: center;
          padding: 0 0 21px 0;
          font-size: 15px;
          line-height: 1.428571429;
          font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
          @media screen and (max-width: 430px) {
            .body-copy {
              line-height: 1.614; } }
    
        td .body-copy {
          padding: 5px 0; }
        td .left {
          text-align: left !important; }
    
        .subhead {
          color: #002247;
          font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
          font-weight: bold;
          text-align: center; }
          .subhead.h3 {
            font-size: 18px;
            padding: 5px 0 25px 0; }
          .subhead.h4 {
            font-size: 15px;
            padding: 10px 0 10px 0; }
          .subhead.h5 {
            font-size: 14px;
            padding: 5px 0 5px 0; }
    
        @media screen and (max-width: 430px) {
          table {
            width: 100% !important;
            text-align: center;
            margin: 0 auto; } }
        @media screen and (max-width: 500px) {
          table.responsive-table {
            max-width: 500px;
            width: 100%; } }
        table.responsive-table img {
          padding: 0 0 5px 0;
          max-width: 100% !important; }
        table.responsive-table.header img {
          padding: 0 0 0 0; }
        @media screen and (max-width: 430px) {
          table.responsive-table .column {
            width: 100% !important;
            max-width: 100% !important; } }
    
        @media screen and (max-width: 430px) {
          .logo img {
            width: auto;
            height: 40px;
            margin: 0 auto; } }
    
        @media screen and (max-width: 500px) {
          .img-max {
            width: 100% !important;
            height: auto !important;
            max-width: 100% !important; } }
    
        .cta {
          font-size: 18px;
          line-height: 1.428571429;
          color: #007bc3;
          font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
          padding: 0 0 5px 0;
          font-weight: bold; }
    
        .bullets td {
          text-align: left;
          padding: 0 0 5px 0; }
          @media screen and (max-width: 500px) {
            .bullets td {
              text-align: left !important; } }
        .bullets span {
          line-height: 1.428571429;
          text-align: left;
          font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
    
        .bullet {
          color: #007bc3 !important;
          font-size: 15px;
          padding-right: 10px; }
          @media screen and (max-width: 500px) {
            .bullet {
              font-size: 12px; } }
    
        .bullet-text {
          color: #333333;
          padding: 5px 0 5px 0px;
          font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
    
        .meta, .caption {
          line-height: 1.428571429;
          color: #999999;
          font-size: 12px;
          font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
    
        .blockquote {
          line-height: 1.428571429;
          color: #999999;
          font-size: 18px;
          font-family: Garamond, Georgia, Times, serif !important;
          font-style: italic;
          padding: 0 10px; }
    
        .disclosure-text {
          display: block;
          line-height: 1.1428571432;
          color: #999999;
          text-align: justify;
          font-size: 12px;
          font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
          font-weight: normal; }
    
        .disclosure-text-large {
          font-size: 14px;
          line-height: 1.1428571432; }
    
        .superscript {
          line-height: 1.428571429;
          font-size: 9px;
          mso-line-height-rule: exactly;
          vertical-align: top; }
    
        hr {
          border-top: 1px solid #cccccc;
          border-left: 0 solid #ffffff;
          border-right: 0 solid #ffffff;
          border-bottom: 0 solid #ffffff; }
    
        .event-section {
          background-color: #cccccc; }
          @media screen and (max-width: 500px) {
            .event-section {
              padding: 0px 10px; } }
    
        .rounded-large {
          -webkit-border-radius: 6px;
          -moz-border-radius: 6px;
          border-radius: 6px;
          overflow: hidden; }
    
        .rounded-small {
          -webkit-border-radius: 3px;
          -moz-border-radius: 3px;
          border-radius: 3px;
          overflow: hidden; }
    
        .mobile-only {
          display: table !important; }
          @media screen and (max-width: 430px) {
            .mobile-only {
              display: none;
              height: 0;
              max-height: 0; } }
    
        @media screen and (max-width: 430px) {
          .mobile-hide {
            display: none !important;
            height: 0 !important;
            opacity: 0 !important;
            max-height: 0 !important; } }
    
    </style>
    
       <!--[if gte mso 9]>
    
            <style>
            body, table, td {font-family: Helvetica, Arial, sans-serif !important;}
            table, td{mso-table-lspace:0pt; mso-table-rspace:0pt;} /* Remove spacing between tables in Outlook 2007 and up */
            img {
                display: block;
            }
            a .arrow{
                font-size: 18px;
                margin-right: 10px;
            }
            .bullet{
                font-size: 18px !important;
            }
            </style>
        <![endif]-->
        <!--[if lt mso 14]>
            <style>
            .icon{
                height: 0;
                width:  0;
                display: none;
            }
            </style>
        <![endif]-->
    
    </head>
    
    
    <body style="margin: 0; padding: 0;">
    <!-- <img src="phone.PNG" class="img-max" alt=""> -->
    
        <!-- ********** Pre-HEADER ********** -->
        <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
           <tr>
              <td class="section-padding-small">
                 <div align="center">
                    <table class="responsive-table" border="0" cellpadding="0" cellspacing="0" width="500" >
                       <tr>
                          <td class="section-padding-small-bottom">
                             <table cellspacing="0" cellpadding="0" align="left" border="0" width="25%">
                                <tr>
                                   <td class="logo" align="center"><img alt="logo" src="logo.png" width="120" height="30">
                                   </td>
                                </tr>
                             </table>
                             <!--[if mso]></td><td><![endif]-->
                             <table border="0" cellpadding="0" cellspacing="0" width="75%" align="right">
                                <tr>
                                   <td align="right" class="mobile-hide">
                                      <table align="right" border="0" cellpadding="0" cellspacing="0">
                                         <tr>
                                            <td class="preheader">
                                               <!--  The below preheader is hidden from view, but exists so the first thing to show up in the preheader isn't the webpage link below  -->
                                               Join us for this exclusive workshop.
                                            </td>
                                            <!-- The special characters below help clear the preheader text after the above message, so that we don't end up with "junk" in our content preview, i.e. "View this email as a webpage." -->
                                            <td class="preheader">
                                               &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;&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;&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;&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;&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;&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;&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;&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;&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;&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;&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;
                                            </td>
                                         </tr>
                                         <tr>
                                            <td class="view-as-webpage" width="100%" align="right" height="30"><a href="%%view_email_url%%" class="meta">View this email as a webpage.</a></td>
                                         </tr>
                                      </table>
                                   </td>
                                </tr>
                             </table>
                          </td>
                       </tr>
                    </table>
                 </div>
              </td>
           </tr>
        </table>
        <!-- ********** End Pre-HEADER ********** -->
    
        <!--  ********** Header **********   -->
        <table border="0" cellpadding="0" cellspacing="0" width="100%" style="font-family: 'Helvetica neue', Helvetica, helvetica, Arial, arial, sans-serif;">
            <tr>
                <td bgcolor="#ffffff" align="center" class="section-padding-large-bottom">
                    <table border="0" cellpadding="0" cellspacing="0" width="500" class="responsive-table header">
                        <tr>
                            <td>
                                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                    <tr>
                                        <td >
                                            <!-- Hero image -->
                                            <table class="rounded-large" border="0" cellspacing="0" cellpadding="0">
                                                <tr>
                                                    <td class="rounded-large" width="500" bgcolor="#002247" align="center" valign="top" style="color: #ffffff; font-size: 30px; font-weight: bold; line-height: 1.2;">
                                                        <a href="#" target="_blank" style="text-decoration: none; color: #ffffff;"><img class="img-max" width="500" src="https://dummyimage.com/1000x800/efefef/888888.png&text=[header]" alt="Headline alt text"></a>
                                                    </td>
                                                </tr>
                                            </table>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
        <!--  ********** End Header **********   -->
    
        <!-- ********** Lead in **********  -->
        <table cellspacing="0" cellpadding="0" align="center" border="0" width="100%">
            <tr>
                <td class="section-padding">
                    <table class="responsive-table" cellspacing="0" cellpadding="0" align="center" width="500">
                        <tr>
                            <td class="lead-in">
                                This is lead-in text. It should only be used for small amounts of text, particularly for leading-in to an email.<span class="superscript">1</span>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
        <!-- ********** End lead in ********** -->
    
        <!--  Body copy   -->
        <table cellspacing="0" cellpadding="0" align="center" border="0" width="100%">
            <tr>
                <td class="section-padding">
                    <table class="responsive-table" cellspacing="0" cellpadding="0" align="center" width="500">
                        <!-- Paragraph -->
                        <tr>
                            <td class="body-copy left">
                                This is paragraph text. It should be 15px/1.4em  for good readability on all devices. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum explicabo, voluptates modi fuga est culpa maxime vero maiores sequi quas optio dolorem nemo quae, voluptas magnam cumque! Odit, aut, autem! <span class="superscript">1</span><br><br>
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae, deleniti. Debitis nihil at vitae, harum tenetur facere ratione soluta unde, rerum, numquam quo perspiciatis velit nobis. Unde iste repudiandae vitae!
                            </td>
                        </tr>
                        <!-- End paragraph -->
    
                        <!-- Bullets -->
                        <tr>
                            <td>
                                <!-- Bullets -->
                                <table cellspacing="0" cellpadding="0" align="center" border="0" width="100%">
                                    <tr>
                                        <td>
                                           <table class="responsive-table" cellspacing="0" cellpadding="0" align="center" border="0" width="470">
                                               <tr>
                                                   <td class="margin">
                                                       <!-- Each <tr> is a bullet; duplicate them for more -->
                                                       <table class="bullets" align="center" cellpadding="2" cellspacing="2" border="0">
                                                           <!-- Bullet -->
                                                           <tr>
                                                               <td width="5%" class="bullet" valign="top">&#9632;</td>
                                                               <td class="body-copy bullet-text" width="90%" align="left">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</td>
                                                           </tr>
                                                           <!-- End Bullet -->
                                                           <!-- Bullet -->
                                                           <tr>
                                                               <td width="5%" class="bullet" valign="top">&#9632;</td>
                                                               <td class="body-copy bullet-text" width="90%" align="left" >Lorem ipsum dolor sit amet, consectetur adipisicing elit.</td>
                                                           </tr>
                                                           <!-- End Bullet -->
                                                           <!-- Bullet -->
                                                           <tr>
                                                               <td width="5%" class="bullet" valign="top">&#9632;</td>
                                                               <td class="body-copy bullet-text" width="90%" align="left">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</td>
                                                           </tr>
                                                           <!-- End Bullet -->
                                                       </table>
                                                   </td>
                                               </tr>
                                           </table> 
                                        </td>
                                    </tr>
                                </table>
                                <!-- End bullets -->
    
                            </td>
                        </tr>
                        <!-- End bullets -->
    
                    </table>
    
                </td>
            </tr>
        </table>
        <!--  End Body copy  -->
    
        <!--  Blockquote   -->
        <table cellspacing="0" cellpadding="0" align="center" border="0" width="100%">
           <tr>
              <td class="section-padding">
                 <table class="responsive-table" cellspacing="0" cellpadding="0" align="center" width="500">
                    <!-- Paragraph -->
                    <tr>
                        <td colspan="1" height="10" width="10" bgcolor="#007bc3"></td>
                    </tr>
                    <tr>
                       <td width="10" bgcolor="#007bc3"></td>
                       <td height="90%" align="center" class="blockquote">
                          "Blockquote which can be used to emphasize a quote or a piece of language."
                       </td>
                    </tr>
                    <tr>
                        <td colspan="1" height="10" width="10" bgcolor="#007bc3"></td>
                    </tr>
                    <!-- End paragraph -->
                 </table>
              </td>
           </tr>
        </table>
        <!--  End Blockquote   -->
    
        <!-- **********  30-70 column module **********  -->
        <table cellspacing="0" cellpadding="0" align="center" border="0" width="100%">
           <tr>
              <td class="section-padding">
                 <table class="responsive-table" cellspacing="0" cellpadding="0" align="center" border="0" width="500">
                    <tr>
                       <td colspan="2" width="100%" class="subhead h3" align="center">Subhead</td>
                    </tr>
                    <tr>
                       <td>
                          <!-- Column -->
                          <table class="column" cellspacing="0" cellpadding="0" align="left" border="0" width="29%" valign="top">
                             <!-- Image -->
                             <tr>
                                <td valign="top" align="center">
                                   <img width="142" src="https://dummyimage.com/500x500/efefef/888888.png&text=[184x184]" alt="Image" />
                                </td>
                             </tr>
                             <tr>
                                <td class="caption">Image caption</td>
                             </tr>
                          </table>
                          <!--[if mso]></td><td><![endif]-->
                          <!-- Column -->
                          <table class="column" cellspacing="0" cellpadding="0" align="right" border="0" width="69%" valign="top">
                             <!-- Paragraph -->
                             <tr>
                                <td class="body-copy" valign="top" width="100%">
                                   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum explicabo, voluptates modi fuga est culpa maxime vero maiores sequi quas optio dolorem nemo quae, voluptas magnam cumque! Odit, aut, autem!
                                </td>
                             </tr>
                             <tr>
                                <td align="center" class="body-copy">
                                    <a href="#" target="_blank"><span class="arrow">➡</span><span class="link-text">Hyperlink</span>
                                    </a>
                                    </td>
                             </tr>
    
                          </table>
                       </td>
                    </tr>
                 </table>
              </td>
           </tr>
        </table>
        <!--  ********** End 30-70 column module ********** -->
    
        <!-- ********** Two column module **********  -->
        <table cellspacing="0" cellpadding="0" align="center" border="0" width="100%">
           <tr>
              <td class="section-padding">
                 <table class="responsive-table" cellspacing="0" cellpadding="0" align="center" border="0" width="500">
                    <tr>
                       <td>
                          <!-- Column -->
                          <table class="column" cellspacing="0" cellpadding="0" align="left" border="0" width="49%" valign="top">
                             <!-- Image -->
                             <tr>
                                <td valign="top" width="100%" align="center">
                                   <img width="240" src="https://dummyimage.com/500x500/efefef/888888.png&text=[500x500]" alt="Image" />
                                </td>
                             </tr>
                             <tr>
                                <td class="meta">Image caption</td>
                             </tr>
                             <!-- Subhead -->
                             <tr>
                                <td class="subhead h4" align="center">2 Column subhead</td>
                             </tr>
                             <!-- Paragraph -->
                             <tr>
                                <td class="body-copy" width="100%" valign="top">
                                   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum explicabo, voluptates modi fuga est culpa maxime vero maiores sequi quas optio dolorem nemo quae, voluptas magnam cumque! Odit, aut, autem!
                                </td>
                             </tr>
                             <tr>
                                <td align="center" class="body-copy">
                                    <a href="#" target="_blank"><span class="arrow">➡</span><span class="link-text">Hyperlink</span>
                                    </a>
                                    </td>
                             </tr>
    
                             <tr>
                                <td>
                                <table class="mobile-only margin" cellspacing="0" cellpadding="0" align="left" border="0" width="100%" bgcolor="#ffffff">
                                   <tr>
                                      <td>&nbsp;</td>
                                   </tr>
                                </table>
                                </td>
                             </tr>
                          </table>
                          <!--[if mso]></td><td><![endif]-->
                          <!-- Column -->
                          <table class="column" cellspacing="0" cellpadding="0" align="right" border="0" width="49%" valign="top">
                             <!-- Image -->
                             <tr>
                                <td valign="top" width="100%" align="center">
                                   <img width="240" src="https://dummyimage.com/500x500/efefef/888888.png&text=[500x500]" alt="Image" />
                                </td>
                             </tr>
                             <tr>
                                <td class="meta">Image caption</td>
                             </tr>
                             <!-- Subhead -->
                             <tr>
                                <td class="subhead h4" align="center">2 Column subhead</td>
                             </tr>
                             <!-- Paragraph -->
                             <tr>
                                <td class="body-copy" width="100%" valign="top">
                                   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum explicabo, voluptates modi fuga est culpa maxime vero maiores sequi quas optio dolorem nemo quae, voluptas magnam cumque! Odit, aut, autem!
                                </td>
                             </tr>
                             <tr>
                                <td align="center" class="body-copy">
                                    <a href="#" target="_blank"><span class="arrow">➡</span><span class="link-text">Hyperlink</span>
                                    </a>
                                    </td>
                             </tr>
    
                             <tr>
                                <td>
                                <table class="mobile-only margin" cellspacing="0" cellpadding="0" align="left" border="0" width="100%" bgcolor="#ffffff">
                                   <tr>
                                      <td>&nbsp;</td>
                                   </tr>
                                </table>
                                </td>
                             </tr>
                          </table>
                       </td>
                    </tr>
                 </table>
              </td>
           </tr>
        </table>
        <!--  ********** End two column module ********** -->
    
        <!-- ********** Three column  **********  -->
        <table cellspacing="0" cellpadding="0" align="center" border="0" width="100%">
           <tr>
              <td class="section-padding">
                 <table class="responsive-table" cellspacing="0" cellpadding="0" align="center" border="0" width="500">
                    <tr>
                       <td class="subhead h3">3 column Subhead</td>
                    </tr>
                    <tr>
                       <td align="center">
                          <!-- Column -->
                          <table class="column" width="32%" align="left" cellspacing="0" cellpadding="0" border="0">
                             <!-- Image -->
                             <tr>
                                <td align="center" width="100%">
                                   <img width="150" src="https://dummyimage.com/160x160/efefef/888888.png&text=300x300" alt="">
                                </td>
                             </tr>
                             <!-- Paragraph -->
                             <tr>
                                <td class="caption">Image caption</td>
                             </tr>
                             <tr>
                                <td class="subhead h4">Column subhead</td>
                             </tr>
                             <tr>
                                <td class="body-copy" align="center">
                                   Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                                </td>
                             </tr>
                             <tr>
                                <td align="center" class="body-copy">
                                    <a href="#" target="_blank"><span class="arrow">➡</span><span class="link-text">Hyperlink</span>
                                    </a>
                                    </td>
                             </tr>
    
                             <tr>
                                <td class="mobile-only margin" >&nbsp;</td>
                             </tr>
                          </table>
                          <!--[if mso]></td><td><![endif]-->
                          <table class="mobile-hide" cellspacing="0" cellpadding="0" align="left" border="0" width="1%">
                             <tr>
                                <td>&nbsp;</td>
                             </tr>
                          </table>
                          <!--[if mso]></td><td><![endif]-->
                          <!-- Column -->
                          <table class="column" width="32%" align="left" cellspacing="0" cellpadding="0" border="0">
    
    
Litmus Logo
    Company
  • Team
  • Customers
  • Careers
  • Contact
  • Brand
    Product
  • Features
  • Pricing
  • Enterprise
  • Extension
    Tools
  • Events
  • Labs
  • Scope
  • Resources
    Help
  • Knowledgebase
  • Status
  • Community
  • Trust
Subscribe to our emails

Copyright © Litmus Software, Inc. 2005-2022. 675 Massachusetts Ave., 11th Floor, Cambridge, MA 02139. View our Terms of Service or Privacy Policy. Send us a note to hello@litmus.com or give us a call at +1 (866) 787-7030

Sign in to Community

Are you new to Litmus Community?

Create a Free Litmus Account

Use your existing Litmus login to connect with the world’s most amazing email designers.

Having trouble signing in? Try Forgot password

Join the Litmus Community

Sign up to Community

Litmus uses the information you provide us to bring you great content about email marketing trends, stats, events and relevant products and services. You may unsubscribe from these communications at any time. For more information, check out our Privacy Policy
Already have a Litmus login? Sign in

Get more out of your Litmus account

Your free Community account includes access to the Litmus Community, as well as limited access to Litmus Builder. Check out the entire Litmus Email Creative Platform when you sign up for a free 7-day trial.

  • Email Previews

    Get 2,000 screenshots/month in popular email clients, including key international webmail clients, to ensure your emails look great everywhere.

  • Builder

    Quickly identify issues pre-send that could impact your deliverability—and get actionable advice for how to fix them.

  • Checklist

    Get screenshots in popular email clients to ensure your email looks great everywhere.

  • Code Editor Integrations

    Preview and troubleshoot your emails right where you build with seamless integrations between Litmus and any local code editor, like Dreamweaver or Sublime.

  • ESP Integrations

    Save time producing and troubleshooting your campaigns with seamless integrations between Litmus and your email service provider (ESP).

  • Spam Testing

    Quickly identify issues pre-send that could impact your deliverability—and get actionable advice for how to fix them.

  • Email Analytics

    Optimize your campaigns with subscriber-level insights to improve segmentation and targeting strategies.

  • Private Litmus Teams

    Get full team visibility. Manage Litmus access and monitor usage across private teams.

No thanks, just sign me up without a trial

Forgot password

Enter your email address to reset your password


Already have a Litmus login? Sign in