search

mjmlio / mjml

MJML: the only framework that makes responsive-email easy
https://mjml.io
MIT License
17.08k stars 960 forks source link

Not aligning images correctly on outlook 2003 & Lotus Note 8.5 #195

Closed lRlevolution closed 8 years ago

lRlevolution commented 8 years ago

Seems as if the images within columns do not align properly on outlook 2003 & Lotus Note 8.5 preview ( http://awesomescreenshot.com/0e05szz6e7 )

<mj-body background-color="#FFFFFF" width="600px">
 <!-- Shipping Notification -->
  <mj-section padding-bottom="7px" padding-top="7px" background-color="#e51b24" color="#ffffff">
      <mj-column width="100%" vertical-align="middle">
          <mj-text align="center" color="#ffffff" font-family="'Helvetica Neue', Helvetica, Arial, sans-serif" font-size="15" padding-left="5" padding-right="5" padding-bottom="0" padding-top="0">
            <span style="font-size: 15px; color:#FFFFFF; font-weight:700;">FREE SHIPPING</span><span style="font-size: 15px; font-weight:400; color:#FFFFFF;"> ON ALL ORDERS OVER $25</span>
          </mj-text>
      </mj-column>
  </mj-section>

 <!--Logo-Nav-->
  <mj-section background-color="#FFFFFF" padding="10px 0" >

 <!--Logo-->
    <mj-column width="30%" vertical-align="middle">
      <mj-image width="117px" src="https://d1s4gadwegul2m.cloudfront.net/pipeline/production/logo-hollar-6cb62359db5f61ba219b79425d932ce6abe1fb918e74ac8f7b2adbc1c01f4405.png" href="www.Hollar.com" alt="hollar logo"></mj-image>
    </mj-column>

 <!--Navigation-->
    <mj-column width="70%" vertical-align="middle">
      <mj-text font-size="12px" align="center" link-color="#595959" font-family="'Helvetica Neue', Helvetica, Arial, sans-serif" padding-bottom="0" padding-top="7" padding-left="0" padding-right="0">
        <a href="https://www.hollar.com/t/category" style="text-decoration: none; color: #595959; font-size:12px !important;">SHOP BY CATEGORY</a><a href="https://www.hollar.com/t/party" style="text-decoration: none; font-size:12px !important; padding:0 17px; color: #595959;">SHOP BY PARTY</a><a href="https://www.hollar.com/t/gifts" style="text-decoration: none; font-size:12px !important; color: #595959;">SHOP GIFTS</a>
      </mj-text>
    </mj-column>

  </mj-section>

  <!-- FEATURED PRODUCT-->
<mj-section padding-bottom="30px" padding-top="0px" padding-left="0px" padding-right="0px" background-color="#ffffff">
  <mj-column background-color="#FFFFFF">

  <!-- FEATURED PRODUCT IMAGE-->
    <mj-image align="center" padding-bottom="0px" padding-top="0px"  padding-left="0px" padding-right="0px"  src="http://hosting-source.bm23.com/35647/public/newsletters/2016/2016_04_19_Redbox/featured_2.jpg" href="https://www.#.com" alt="$5 Digital Movie Downloads (Including Inside Out!)"></mj-image>

   <!--FEATURED PRODUCT TITLE-->
      <mj-text align="center" font-weight="500" color="#333333" font-family="'Helvetica Neue', Helvetica, Arial, sans-serif" font-size="21px" line-height="23px" padding-left="15" padding-right="15" padding-bottom="0" padding-top="10">
        <p style="font-size:21px !important; color:#333333 !important; font-weight:500; margin:11px 0 6px 0;">$5 Digital Movie Downloads (Including Inside Out!)</span></p>
      </mj-text>

      <!--FEATURED PRODUCT DESCRIPTION-->
      <mj-text align="center" color="#666666" font-family="'Helvetica Neue', Helvetica, Arial, sans-serif" font-size="17" font-weight="400" line-height="23px" padding-left="25" padding-right="25" padding-bottom="10" padding-top="0">
        <p style="margin:0px 0 5px !important; color:#666666 !important; font-weight:400; letter-spacing:0.02em !important; font-size:17px; max-width:450px;">Get ready for family movie night with digital downloads of your favorite Disney flicks!</p>
      </mj-text>

       <!--FEATURED BUTTON-->
      <mj-button background-color="#e51b24" color="#FFFFFF" font-size="16px" align="center" vertical-align="middle" border="none" padding="15px 30px" border-radius="0px" font-family="Helvetica, Arial, sans-serif" href="https://www.#.com" padding-left="25" padding-right="25" padding-bottom="0" padding-top="10">
        SHOP NOW
      </mj-button>

    </mj-column>
  </mj-section>

   <!-- SUB FEATURED PRODUCT-->
<mj-section padding-bottom="20px" padding-top="20px" padding-left="0px" padding-right="0px" background-color="#ffffff">
  <mj-column background-color="#FFFFFF">
  <!-- SUB FEATURED PRODUCT IMAGE-->
    <mj-image align="center" padding-bottom="0px" padding-top="0px"  padding-left="0px" padding-right="0px"  src="http://hosting-source.bm23.com/35647/public/newsletters/2016/2016_04_19_Redbox/sub_featured.jpg" href="https://www.#.com" alt="More toys. More party picks. More to love!"></mj-image>
    </mj-column>
  </mj-section>

  <!-- PRODUCTS TITLE-->
<mj-section padding="0" background-color="#FFFFFF">
    <mj-column background-color="#FFFFFF">
      <mj-image padding-bottom="10px" padding-top="30px"  padding-left="20px" padding-right="20px" src="http://hosting-source.bm23.com/35647/public/newsletters/2016/2016_04_19_Redbox/title.png"></mj-image>
    </mj-column>
</mj-section>

  <!-- PRODUCT 1-->
<mj-section padding="0" background-color="#FFFFFF">

  <!-- PRODUCT 1-->
    <mj-column width="50%" background-color="#FFFFFF" vertical-align="bottom">
      <!-- PRODUCT 1 IMAGE-->
      <mj-image align="center" padding-bottom="0px" padding-top="10px" padding-left="0px" padding-right="0px" src="http://hosting-source.bm23.com/35647/public/newsletters/2016/2016_04_19_Redbox/candle.jpg" href="https://www.#.com" alt="Ball Candle - Ocean Breeze"></mj-image>
       <!--PRODUCT 1 TITLE-->
       <mj-text align="center" font-weight="400" color="#666666" font-family="'Helvetica Neue', Helvetica, Arial, sans-serif" font-size="16px" line-height="22px" padding-left="25px" padding-right="25" padding-bottom="20px" padding-top="0">
        <span style="font-size:16px !important; color:#666666 !important; font-weight:400; margin:3px 0 6px 0;">Ball Candle - Ocean Breeze</span><br><span style="font-size: 32px; line-height: 38px; font-weight:bold; color:#ff5500">$3</span><span style="font-size: 13px; color: #333333 !important; font-weight:normal; text-decoration: line-through; color:#999999 !important; padding-left:5px;">$12</span>
      </mj-text>
  </mj-column>

      <mj-column width="50%" background-color="#FFFFFF" vertical-align="bottom">
      <!-- PRODUCT 2 IMAGE-->
      <mj-image align="center" padding-bottom="0px" padding-top="10px" padding-left="0px" padding-right="0px" src="http://hosting-source.bm23.com/35647/public/newsletters/2016/2016_04_19_Redbox/mani.jpg" href="https://www.#.com" alt="Glam Gal Mani Kit"></mj-image>
       <!--PRODUCT 2 TITLE-->
       <mj-text align="center" font-weight="400" color="#666666" font-family="'Helvetica Neue', Helvetica, Arial, sans-serif" font-size="17px" line-height="23px" padding-left="25px" padding-right="25px" padding-bottom="20px" padding-top="0">
        <span style="font-size:17px !important; color:#666666 !important; font-weight:400; margin:3px 0 6px 0;">Glam Gal Mani Kit</span><br><span style="font-size: 32px; line-height: 38px; font-weight:bold; color:#ff5500">$2</span><span style="font-size: 13px; color: #333333 !important; font-weight:normal; text-decoration: line-through; color:#999999 !important; padding-left:5px;">$3</span>
      </mj-text>
  </mj-column>

</mj-section>

<!-- PRODUCT 3-->
<mj-section padding="0" background-color="#FFFFFF">

    <mj-column width="50%" background-color="#FFFFFF" vertical-align="bottom">
      <!-- PRODUCT 3 IMAGE-->
      <mj-image align="center" padding-bottom="0px" padding-top="10px" padding-left="0px" padding-right="0px" src="http://hosting-source.bm23.com/35647/public/newsletters/2016/2016_04_19_Redbox/shopkins.jpg" href="https://www.#.com" alt="Shopkins Glitter Flip Flops"></mj-image>
       <!--PRODUCT 3 TITLE-->
       <mj-text align="center" font-weight="400" color="#666666" font-family="'Helvetica Neue', Helvetica, Arial, sans-serif" font-size="17px" line-height="23px" padding-left="25px" padding-right="25px" padding-bottom="20px" padding-top="0">
        <span style="font-size:17px !important; color:#666666 !important; font-weight:400; margin:3px 0 6px 0;">Shopkins Glitter Flip Flops</span><br><span style="font-size: 32px; line-height: 38px; font-weight:bold; color:#ff5500">$5</span><span style="font-size: 13px; color: #333333 !important; font-weight:normal; text-decoration: line-through; color:#999999 !important; padding-left:5px;">$15</span>
      </mj-text>
  </mj-column>

  <!-- PRODUCT 4-->
      <mj-column width="50%" background-color="#FFFFFF" vertical-align="bottom">
      <!-- PRODUCT 4 IMAGE-->
       <mj-image align="center" padding-bottom="0px" padding-top="10px" padding-left="0px" padding-right="0px" src="http://hosting-source.bm23.com/35647/public/newsletters/2016/2016_04_19_Redbox/frog.jpg" href="https://www.#.com" alt="Webkinz Plush Pet - Tree Frog"></mj-image>
       <!--PRODUCT 4 TITLE-->
             <mj-text align="center" font-weight="400" color="#666666" font-family="'Helvetica Neue', Helvetica, Arial, sans-serif" font-size="16px" line-height="22px" padding-left="20px" padding-right="20px" padding-bottom="20px" padding-top="0">
        <span style="font-size:16px !important; color:#666666 !important; font-weight:400; margin:3px 0 6px 0;">Webkinz Plush Pet -<br> Tree Frog</span><br><span style="font-size: 32px; line-height: 38px; font-weight:bold; color:#ff5500">$3</span><span style="font-size: 12px; color: #333333 !important; font-weight:normal; text-decoration: line-through; color:#999999 !important; padding-left:5px;">$8</span>
      </mj-text>
  </mj-column>

</mj-section>

<!-- PRODUCT 5-->
<mj-section padding="0" background-color="#FFFFFF">

    <mj-column width="50%" background-color="#FFFFFF" vertical-align="bottom">
      <!-- PRODUCT 5 IMAGE-->
       <mj-image align="center" padding-bottom="0px" padding-top="10px" padding-left="0px" padding-right="0px" src="http://hosting-source.bm23.com/35647/public/newsletters/2016/2016_04_19_Redbox/yoga.jpg" href="https://www.#.com" alt="Zak! Colander with Handles"></mj-image>
       <!--PRODUCT 5 TITLE-->
        <mj-text align="center" font-weight="400" color="#666666" font-family="'Helvetica Neue', Helvetica, Arial, sans-serif" font-size="17px" line-height="23px" padding-left="25px" padding-right="25px" padding-bottom="20px" padding-top="0">
        <span style="font-size:17px !important; color:#666666 !important; font-weight:400; margin:3px 0 6px 0;">Yoga Block</span><br><span style="font-size: 32px; line-height: 38px; font-weight:bold; color:#ff5500">$4</span><span style="font-size: 12px; color: #333333 !important; font-weight:normal; text-decoration: line-through; color:#999999 !important; padding-left:5px;">$12</span>
      </mj-text>
  </mj-column>

  <!-- PRODUCT 6-->
  <mj-column width="50%" background-color="#FFFFFF" vertical-align="bottom">
      <!-- PRODUCT 6 IMAGE-->
       <mj-image align="center" padding-bottom="0px" padding-top="10px" padding-left="0px" padding-right="0px" src="http://hosting-source.bm23.com/35647/public/newsletters/2016/2016_04_19_Redbox/headphones.jpg" href="https://www.#.com" alt="Music Gear Padded Headphones"></mj-image>
       <!--PRODUCT 6 TITLE-->
       <mj-text align="center" font-weight="400" color="#666666" font-family="'Helvetica Neue', Helvetica, Arial, sans-serif" font-size="17px" line-height="23px" padding-left="25px" padding-right="25px" padding-bottom="20px" padding-top="0">
        <span style="font-size:17px !important; color:#666666 !important; font-weight:400; margin:3px 0 6px 0;">Music Gear Padded Headphones</span><br><span style="font-size: 32px; line-height: 38px; font-weight:bold; color:#ff5500">$4</span><span style="font-size: 12px; color: #333333 !important; font-weight:normal; text-decoration: line-through; color:#999999 !important; padding-left:5px;">$15</span>
      </mj-text>
  </mj-column>

</mj-section>

<!--DIVIDER-->
 <mj-section padding="0" background-color="#ffffff">
      <mj-column width="100%" vertical-align="middle">
            <mj-divider border-width="1px" border-style="solid" border-color="#e3e3e3" padding="0"></mj-divider>
        </mj-column>
    </mj-section>

<!--SOCIAL DIVIDER-->
<mj-section  background-color="#FFFFFF" padding="7px 0">

<!--SOCIAL DIVIDER TEXT-->
    <mj-column width="45%" vertical-align="middle">
      <mj-text align="center" padding="7px 0" font-size="19" color="#666666" locked="true" editable="true" font-family="'Helvetica Neue', Helvetica, Arial, sans-serif">
        <p style="color:#666666; font-size:17px; margin:0;">Join the Party on Social</p>
      </mj-text>
    </mj-column>

<!--SOCIAL DIVIDER ICONS-->
    <mj-column width="55%" vertical-align="middle">
              <mj-text padding="7px 0" align="center">
                      <table width="250px" cellspacing="0" cellpadding="0" border="0" align="center">

                              <tbody><tr>

                                <td width="37" align="center"><a target="_blank" href="http://urlgeni.us/facebook/shophollar"><img width="34" border="0" style="display:block;" alt="facebook.com/shophollar" src="http://hosting-source.bm23.com/35647/public/newsletters/2016/2016_02_03_App/social-facebook.png" mc:edit="fac"></a></td>

                                <td width="10">&nbsp;</td>

                                <td width="37" align="center"><a target="_blank" href="http://urlgeni.us/instagram/hollar"><img width="34" border="0" style="display:block;" alt="Instagram: @hollar" src="http://hosting-source.bm23.com/35647/public/newsletters/2016/2016_02_03_App/social-instagram.png" mc:edit="twit"></a></td>

                                <td width="12">&nbsp;</td>

                                <td width="37"><a target="_blank" href="http://urlgeni.us/pinterest/hollar"><img width="34" border="0" style="display:block;" alt="pinterest.com/hollar" src="http://hosting-source.bm23.com/35647/public/newsletters/2016/2016_02_03_App/social-pinterest.png" mc:edit="link"></a></td>

                                <td width="10">&nbsp;</td>

                                <td width="37" align="center"><a target="_blank" href="http://urlgeni.us/twitter/sN8L"><img width="34" border="0" style="display:block;" alt="Twitter: @hollar" src="http://hosting-source.bm23.com/35647/public/newsletters/2016/2016_02_03_App/social-twitter.png" mc:edit="pint"></a></td>
                                <td width="10">&nbsp;</td>

                                <td width="37" align="center"><img width="34" border="0" style="display:block;" alt="Snapchat: @hollarsnaps" src="http://hosting-source.bm23.com/35647/public/newsletters/2016/2016_02_03_App/social-snapchat.png" mc:edit="pint"></td>

                                <td width="10">&nbsp;</td>

                                 <td width="37" align="center"><a target="_blank" href="http://blog.hollar.com/ "><img width="40" border="0" style="display:block;" alt="Hollar Blog" src="http://hosting-source.bm23.com/35647/public/newsletters/2016/2016_02_03_App/social-blog.png" mc:edit="pint"></a></td>

                              </tr>

                            </tbody></table>
      </mj-text>
    </mj-column>
  </mj-section>

<!--DIVIDER-->
 <mj-section padding="0" background-color="#ffffff">
      <mj-column width="100%" vertical-align="middle">
            <mj-divider border-width="1px" border-style="solid" border-color="#e3e3e3" padding="0"></mj-divider>
        </mj-column>
    </mj-section>

   <!--SOCIAL SHARE!-->
<mj-section padding="10px 0" background-color="#ffffff">
  <mj-column width="50%" background-color="#FFFFFF">
      <mj-image href="www.Hollar.com?utm_medium=email&utm_source=email&utm_campaign=abandonedcart&utm_content=logo" vertical-align="middle" width="250" padding="0" src="http://hosting-source.bm23.com/35647/public/newsletters/2016/2016_02_03_App/social_blog_share.png"></mj-image>
  </mj-column>

   <!--DOWNLOAD THE APPS-->
 <mj-column width="50%" background-color="#FFFFFF" vertical-align="middle">
      <mj-text align="center" color="#666666" font-family="Helvetica, Arial, sans-serif" font-size="15" padding-left="25" padding-right="25" padding-bottom="10" padding-top="0">
        <p>Download the App</p>
        <table width="200" cellspacing="0" cellpadding="0" border="0" align="center">
                        <tbody><tr>
        <td width="100" align="center"><a style="border: none; outline: none; text-decoration: none;" href="https://itunes.apple.com/us/app/hollar-so.-much.-good.-stuff/id1076108089?mt=8"><img alt="" src="http://hosting-source.bm23.com/35647/public/newsletters/2016/2016_02_02_Emojis/email_emojis_160202_r1_21.png"></a></td>

        <td width="100" align="center"><a style="border: none; outline: none; text-decoration: none;" href="https://play.google.com/store/apps/details?id=com.hollar.android"><img src="http://hosting-source.bm23.com/35647/public/newsletters/2016/2016_02_02_Emojis/email_emojis_160202_r1_22.png"></a></td>
    </tr>
      </tbody></table>
    </mj-text>
  </mj-column>
</mj-section>

<!--DIVIDER-->
 <mj-section padding="0" background-color="#ffffff">
      <mj-column width="100%" vertical-align="middle">
            <mj-divider border-width="1px" border-style="solid" border-color="#e3e3e3" padding="0"></mj-divider>
        </mj-column>
    </mj-section>

    <!--BOTTOM LOGO-->
 <mj-section padding="5px 0" background-color="#ffffff">
      <mj-column width="100%">
             <mj-image href="www.Hollar.com?utm_medium=email&utm_source=email&utm_campaign=abandonedcart&utm_content=logo" vertical-align="middle" width="90" padding="20px 20px" src="https://d1s4gadwegul2m.cloudfront.net/pipeline/production/logo-hollar-6cb62359db5f61ba219b79425d932ce6abe1fb918e74ac8f7b2adbc1c01f4405.png"></mj-image>

             <!--Bottom Navigation-->
              <mj-text align="center" link-color="#595959" padding-bottom="0" padding-top="0" padding-left="0" padding-right="0" font-size="11px">
               <a href="%%!manage_url%%" style="text-decoration: none; color: #595959;">EMAIL PREFERENCES&#xA0;&#xA0;|</a><a href="http://www.hollar.com/contact" style="text-decoration: none; color: #595959;">&#xA0;&#xA0;CONTACT US&#xA0;&#xA0;|</a><a href="https://hollar.com/privacy" style="text-decoration: none; color: #595959;">&#xA0;&#xA0;PRIVACY POLICY</a>
              </mj-text>

               <!--Disclaimer-->
              <mj-text align="center" color="#808080" font-family="'Helvetica Neue', Helvetica, Arial, sans-serif" font-size="11" line-height="22px"padding-left="25" padding-right="25" padding-bottom="10" padding-top="0">  
        <p style="font-size:11px; line-height:22px; color:#808080;">Free shipping offer is automatically applied at checkout on all first-time orders over $10. For subsequent orders over $25 pre-tax, free shipping will be applied at checkout. Offers valid on U.S. orders only.</p>
        <p style="font-size:11px; line-height:22px; color:#808080;">If you'd like to unsubscribe, click <a href="%%!unsubscribe_url%%" style="color:#808080; text-decoration:none;">here</a><br />
                        Copyright &copy; 2016 %%!account_organization%%. All rights reserved. <br>
                        %%!account_address1%% %%!account_address2%%, %%!account_city%%, %%!account_state%% %%!account_zip%%</p>
      </mj-text>
              </mj-text>
        </mj-column>
    </mj-section>

</mj-body>
arnaudbreton commented 8 years ago

Hey @lRlevolution, sorry about that. We're looking into it and come back to you shortly!

Your template looks awesome btw!

iRyusa commented 8 years ago

Hello,

With recent change on 2.1.1 I think this now solved. Can you reopen if you have any issue ?