I am trying to conditionally render a block of HTML, dependent on the presence of a key in the JSON -> custom_invite_text.
My understanding is that the Mustachio conditions control the presence of the HTML blocks below. This is working fine, but we lose access to the dynamic data provided by the JSON. Presume it is a scoping issue, but some guidance would be good?
The following HTML is used to generate an email:
<p>{{body}}</p>
{{#custom_invite_text}}
<table class="custom_invite">
<tr class="custom_invite_rows">
<td class="custom_invite_row1"><div class="roundel"><p class="roundel-text">{{custom_invite_org}}</p></div></td>
<td class="custom_invite_row2"><p class="custom_invite_heading">From {{org_name}}</p></td>
</tr>
</table>
{{/custom_invite_text}}
{{#custom_invite_text}}
<table class="body-action custom_invite_div" align="center" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td class="custom_invite_text" align="left">
{{{custom_invite_text}}}
</td>
</tr>
<tr class="custom_invite_btn">
<td align="center">
<!-- Border based button https://litmus.com/blog/a-guide-to-bulletproof-buttons-in-email-design -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
{{behaviour_url_description}}
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
{{/custom_invite_text}}
{{^custom_invite_text}}
<table class="body-action" align="center" width="100%" cellpadding="0" cellspacing="0">
<tr class="custom_invite_btn">
<td align="center">
<!-- Border based button https://litmus.com/blog/a-guide-to-bulletproof-buttons-in-email-design -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
{{behaviour_url_description}}
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
{{/custom_invite_text}}
Thanks.
I have no idea what's going on. The sections show up in preview and test emails, but when I add template to a campaign, suddenly the Contact and Facebook section is gone. WHYYY. It makes no sense why it's just disappearing when I add it to a campaign. This is the section that disappears when I add email template to the campaign. Is something wrong with the tables? I looked at CSS and there's hardly anything.
<!-- Facebook Recommendation -->
<div mc:repeatable="Select" mc:variant="facebook recommendation">
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#231C15">
<tr>
<td valign="top" align="center" class="p30-15" style="padding:60px 0px 60px 0px;">
<table width="650" border="0" cellspacing="0" cellpadding="0" class="mobile-shell">
<tr>
<td class="td" style="width:100%;font-size:0pt;line-height:0pt;padding:0;margin:0;font-weight:normal;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<th class="column" style="font-size:0pt;line-height:0pt;padding:0;margin:0;font-weight:normal;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="h3 pb20" style="color:#fff;font-family:Roboto, Arial, sans-serif;font-size:40px;line-height:40px;text-align:center;font-weight:bold;padding-bottom:20px;">
<div mc:edit="text_16">Recommend us on Facebook!</div>
</td>
</tr>
<tr>
<td class="text pb20" style="color:#fff;font-family:Roboto, Arial, sans-serif;font-size:15px;line-height:30px;text-align:center;padding-bottom:20px;">
<div mc:edit="text_18">Recommend us on our Facebook page! This ensures we can reach even more people to provide the best possible care during their move! </div>
</td>
</tr>
<!-- Button -->
<tr mc:hideable>
<td align="center">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="text-button" style="background:#fff;color:#231C15;font-family:Lato, Arial, sans-serif;font-size:14px;line-height:18px;padding:12px 20px;text-align:center;letter-spacing:1px;font-weight:600;text-transform:uppercase;border-radius:22px;">
<div mc:edit="text_19">
<span class="link-white" style="color:#231C15; text-decoration:none;">RECOMMEND US</span>
</div>
</td>
</tr>
</table>
</td>
</tr>
<!-- END Button -->
</table>
</th>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!-- Facebook Recommendation -->
<!-- Contact -->
<div mc:repeatable="Select" mc:variant="Contact">
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#f4f4f4">
<tr>
<td valign="top" align="center" class="p30-15" style="padding:30px 0px 0px 0px;">
<table width="650" border="0" cellspacing="0" cellpadding="0" class="mobile-shell">
<tr>
<td class="td" style="width:100%;font-size:0pt;line-height:0pt;padding:0;margin:0;font-weight:normal;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="h3 center pb15" style="color:#000000;font-family:Roboto, Arial, sans-serif;font-size:24px;line-height:32px;font-weight:bold;text-align:center;padding-bottom:10px;">
<div mc:edit="text_37">Contact Us</div>
</td>
</tr>
<tr>
<td class="text-center pb30" style="color:#777777;font-family:Roboto, Arial, sans-serif;font-size:15px;line-height:30px;text-align:center;padding-bottom:20px;">
<div mc:edit="text_38">Looking to make another move? <br>Give us a call!</div>
</td>
</tr>
<tr>
<td align="center" style="padding-bottom:50px;">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<th class="column-top" style="font-size:0pt;line-height:0pt;padding:0;margin:0;font-weight:normal;vertical-align:top;">
<table class="center" border="0" cellspacing="0" cellpadding="0" style="text-align:center;">
<tr>
<td class="img" width="50" style="font-size:0pt;line-height:0pt;text-align:left;"><img src="https://gallery.mailchimp.com/0d9e3bf61406dcc2f6b321e6d/images/1a994bda-97c5-4ebf-b478-de1e3e2e6d6c.png" width="34" height="34" style="max-width:34px;" border="0" alt="" mc:edit="image_20">
</td>
<td class="text" style="color:#777777;font-family:Roboto, Arial, sans-serif;font-size:16px;line-height:30px;text-align:left;">
<div mc:edit="text_39">
<strong class="link" style="color:#777777;text-decoration:none;">855-624-4537</strong>
</div>
</td>
</tr>
</table>
</th>
<th class="column-empty2" width="30" style="font-size:0pt;line-height:0pt;padding:0;margin:0;font-weight:normal;vertical-align:top;"></th>
<th class="column-top" style="font-size:0pt;line-height:0pt;padding:0;margin:0;font-weight:normal;vertical-align:top;">
<table class="center" border="0" cellspacing="0" cellpadding="0" style="text-align:center;">
<tr>
<td class="img" width="50" style="font-size:0pt;line-height:0pt;text-align:left;"><img src="https://gallery.mailchimp.com/0d9e3bf61406dcc2f6b321e6d/images/9e146158-5e5d-4d4d-a99e-02f32506799a.png" width="34" height="34" style="max-width:34px;" border="0" alt="" mc:edit="image_21">
</td>
<td class="text" style="color:#777777;font-family:Roboto, Arial, sans-serif;font-size:16px;line-height:30px;text-align:left;">
<div mc:edit="text_40">
<a target="mailto:service#moveandstore.com" class="link" style="color:#777777;text-decoration:none;"><strong class="link" style="color:#777777;text-decoration:none;">service#moveandstore.com</strong></a>
</div>
</td>
</tr>
</table>
</th>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0" dir="rtl" style="direction:rtl;">
<tr>
<th class="column" dir="ltr" width="433" style="font-size:0pt;line-height:0pt;padding:0;margin:0;font-weight:normal;">
</th>
<th class="column-empty" dir="ltr" width="40" style="font-size:0pt;line-height:0pt;padding:0;margin:0;font-weight:normal;vertical-align:top;"></th>
<th class="column" dir="ltr" style="font-size:0pt;line-height:0pt;padding:0;margin:0;font-weight:normal;">
</th>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!-- END Contact -->
Okay - From my limited knowledge with MailChimp I think I have stumbled across something.
I see in your table you have the mc:repeatable="Select" attribute. From the MailChimp help section - this says that this will be hidden automatically unless a user adds it via the campaign builder.
Add the mc:repeatable attribute to any area that includes an mc:edit attribute to create a content block that can be repeatedly added to a template. Repeatable content areas are hidden by default so they only appear in a template if you add them within the Campaign Builder.
Source: Mailchimp help (create editable content areas with mailchimps template language)
I'm editing a bought responsive email template. Below you can see the structure used.
The email is responsive on the web version and on desktop browser email clients. But when testing it on mobile email apps like Gmail, the structure breaks, and on Yahoo it displays the desktop version.
After cleaning up the code, and testing diferent versions... I think the problem is in the section where there is a background full width and then a normal width table with 2 images.
I tried putting the background on the top <table> and then on the <td> but it still don't work on mobile email apps like Gmail or Yahoo.
I don't know if I'm missing up something, or I'm doing something wrong. It only breaks on mobile email apps.
Thanks in advance.
Here is the code of the top section.
<table class="main-header" data-module="Header" data-bgcolor="Header" data-bg="Header" style="position: relative; opacity: 1; z-index: 0; background-image: url(https://i.ytimg.com/vi/vUQUDS-TL6Q/hqdefault.jpg); background-size: cover; background-position: 50% 40%;" background="https://i.ytimg.com/vi/vUQUDS-TL6Q/hqdefault.jpg" width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tbody><tr>
<td class="zay600" border="0" align="center" cellpadding="0" cellspacing="0">
<table cellspacing="0" cellpadding="0" align="center" border="0" width="90%" class="zay600">
<!-- img -->
<tbody><tr>
<td align="center">
<table align="center" class="zay600" width="600" border="0" cellspacing="0" cellpadding="0">
<!-- logo -->
<tbody><tr>
<td>
<table align="left" class="zay3-3" width="120" border="0" cellspacing="0" cellpadding="0">
<tbody><tr>
<td height="40">
</td>
</tr>
<!-- logo -->
<tr>
<td align="center" valign="middle" style="line-height:0px;">
<img style="display:block; font-size:0px; line-height:0px; border:0px;" src="http://www.dickson-constant.com/medias/images/catalogue/api/m654-grey-680.jpg" width="249" height="70" alt="img">
</td>
</tr>
<!-- end logo -->
</tbody></table>
<!--Space-->
<table width="1" height="30" border="0" cellpadding="0" cellspacing="0" align="left">
<tbody><tr>
<td height="30" style="font-size: 0;line-height: 0;border-collapse: collapse;">
<p style="padding-left: 24px;">
</p>
</td>
</tr>
</tbody></table>
<table align="right" class="zay3-3" width="280" border="0" cellspacing="0" cellpadding="0">
<tbody><tr>
<td height="50">
</td>
</tr>
<!-- logo -->
<tr>
<td align="center">
<table class="zay-inner" width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tbody><tr>
<td align="center" valign="middle" style="line-height:0px;"><img style="display:block; font-size:0px; line-height:0px; border:0px;" src="http://www.dickson-constant.com/medias/images/catalogue/api/m654-grey-680.jpg" width="280" height="36" alt="img">
</td></tr>
</tbody></table>
</td>
</tr>
<!-- end logo -->
</tbody></table>
<!--End Space-->
</td>
</tr>
<!-- menu -->
<!-- end menu -->
</tbody></table>
</td>
</tr>
<!-- end logo -->
<tr>
<td height="100" class="header-td">
</td>
</tr>
<!-- subtitle -->
<tr>
<td>
<!-- content -->
<table class="zay600" width="600" border="0" align="center" cellpadding="0" cellspacing="0">
<tbody><tr>
<td align="center">
<table border="0" width="184" align="center" cellpadding="0" cellspacing="0" class="container580">
<tbody><tr>
<td align="center" valign="middle" style="line-height:0px;">
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td align="center">
<!-- img -->
<table align="center" class="zay3-3" width="275" border="0" cellspacing="0" cellpadding="0">
<tbody><tr>
<td align="center" style="line-height:0px;">
</td>
</tr>
</tbody></table>
<!-- end img -->
</td>
</tr>
<tr>
<td align="center">
<!-- img -->
<table align="center" class="zay3-3" width="275" border="0" cellspacing="0" cellpadding="0">
<tbody><tr>
<td align="center" style="line-height:0px;">
</td>
</tr>
</tbody></table>
<!-- end img -->
</td>
</tr>
</tbody></table>
<!-- end content -->
</td>
</tr>
<!-- end subtitle -->
<tr>
<td height="100" class="header-td">
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
I want all the checkout button to be aligned evenly. Description of different products could be on 2 or 3 lines. And I want these button to stay on the same line. I tried to change line-height, but this affects all the buttons.
Here is a playground for that
<table border="0" cellpadding="0" cellspacing="0" width="650"><tbody><tr><td>
<table style="border-collapse:collapse" align="left" border="0" cellpadding="0" cellspacing="0" width="430"><tbody><tr><td>
<table style="border-collapse:collapse" align="left" border="0" cellpadding="0" cellspacing="0" width="210"><tbody><tr><td>
<img class="CToWUd" src="https://ci3.googleusercontent.com/proxy/1GKwB3DZSd0BPMDboD6iz7Ouq-wX00lP_G9TEUtJvjk3Gl5217FB6-q7E4qkCVjd5MVbYac2bUu9s5KrC8CNvpOQujvl5A-VraYMFfE8UzcBuw0O_MfbMdTOJhTWu9Rl5oVzd-4fVw=s0-d-e1-ft#https://www.venusbymariatash.com/media/catalog/product/C/R/CR65_B-ROSE_GOLD_1.png" alt="" style="display:block" border="0" width="210">
</td>
</tr><tr><td style="font-family:Arial,Helvetica,sans-serif;font-size:16px;color:#363636;font-weight:bold;line-height:16px;text-align:center;padding:0 0 15px">
1/4" Plain Ring (Earlobe) - ROSE GOLD
</td>
</tr><tr><td style="font-family:Arial,Helvetica,sans-serif;font-size:12px;color:#363636;line-height:16px;text-align:center">
$110.00
</td>
</tr><tr><td style="padding:20px 0 0">
<table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td style="font-family:Arial,Helvetica,sans-serif;font-size:18px" align="center" bgcolor="#fff">
<strong>CHECKOUT</strong>
</td>
</tr></tbody></table></td>
</tr></tbody></table><table style="border-collapse:collapse" align="right" border="0" cellpadding="0" cellspacing="0" width="210"><tbody><tr><td>
<img class="CToWUd" src="https://ci6.googleusercontent.com/proxy/CL7UjYFnWe3FNZINIJJgPOVH18yP9nKSJZJdbbalv96XbhdRdiLweSYJ6DspRUu8KHjFGT9GCjVmgxAQY3Kpa7_aU5yUeMbdAha6dPGV4JVu16m2xSLjMgC3FA8qrs38xyWr1ygiyM0=s0-d-e1-ft#https://www.venusbymariatash.com/media/catalog/product/C/R/CR65_B-WHITE_GOLD_1.png" alt="" style="display:block" border="0" width="210">
</td>
</tr><tr><td style="font-family:Arial,Helvetica,sans-serif;font-size:16px;color:#363636;font-weight:bold;line-height:16px;text-align:center;padding:0 0 15px">
1/4" Plain Ring (Earlobe) - WHITE GOLD
</td>
</tr><tr><td style="font-family:Arial,Helvetica,sans-serif;font-size:12px;color:#363636;line-height:16px;text-align:center">
$110.00
</td>
</tr><tr><td style="padding:20px 0 0; min-height: 100px;">
<table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td style="font-family:Arial,Helvetica,sans-serif;font-size:18px" align="center" bgcolor="#fff">
<strong>CHECKOUT</strong>
</td>
</tr></tbody></table></td>
</tr></tbody></table></td>
</tr></tbody></table><table style="border-collapse:collapse" align="right" border="0" cellpadding="0" cellspacing="0" width="210"><tbody><tr><td>
<img class="CToWUd" src="https://ci6.googleusercontent.com/proxy/oXpSdsWCQF_bW7AslUS7Fi71WwkcWjSpNklnWUJtDDgaxexkpoqVKaeIWTopPL8YfTZMqfOBV-jW7SV3DOGMi5Eq-o8FhU9JWH69-f-Ukh4dbVTeFoq9yCIuWWGmSwEOA6eaBgkxhzA=s0-d-e1-ft#https://www.venusbymariatash.com/media/catalog/product/C/E/CET8D22-ROSE_GOLD_1.png" alt="" style="display:block" border="0" width="210">
</td>
</tr><tr><td style="font-family:Arial,Helvetica,sans-serif;font-size:16px;color:#363636;font-weight:bold;line-height:16px;text-align:center;padding:0 0 15px">
5/16" Diamond Continuous Eternity Ring (Helix) - ROSE GOLD
</td>
</tr><tr><td style="font-family:Arial,Helvetica,sans-serif;font-size:12px;color:#363636;line-height:30px;text-align:center">
$515.00
</td>
</tr><tr><td style="padding:20px 0 0">
<table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td style="font-family:Arial,Helvetica,sans-serif;font-size:18px" align="center" bgcolor="#fff">
<strong>CHECKOUT</strong>
</td>
</tr><tr><td height="15">
</td>
</tr></tbody></table></td>
</tr></tbody></table></td>
</tr></tbody></table>
http://codepen.io/anon/pen/vGpzVa
Thank you!
The simplest is to move the buttons to their own row.
<table border="0" cellpadding="0" cellspacing="0" width="650">
<tbody>
<tr>
<td>
<table style="border-collapse:collapse" align="left" border="0" cellpadding="0" cellspacing="0" width="430">
<tbody>
<tr>
<td>
<table style="border-collapse:collapse" align="left" border="0" cellpadding="0" cellspacing="0" width="210">
<tbody>
<tr>
<td>
<a href="https://app.remarkety.com/public/track/link/umk/NTcwNjdkNTdjMWJhMjIuODA4MDE3MzA1NzA2N2Q1N2M=/origurl/aHR0cHMlM0ElMkYlMkZ3d3cudmVudXNieW1hcmlhdGFzaC5jb20lMkYxNC1wbGFpbi1yaW5nLWVhcmxvYmUtcm9zZS1nb2xkLWNyNjUtYi1yb3NlLWdvbGQuaHRtbA==" target="_blank"
data-saferedirecturl="https://www.google.com/url?hl=en&q=https://app.remarkety.com/public/track/link/umk/NTcwNjdkNTdjMWJhMjIuODA4MDE3MzA1NzA2N2Q1N2M%3D/origurl/aHR0cHMlM0ElMkYlMkZ3d3cudmVudXNieW1hcmlhdGFzaC5jb20lMkYxNC1wbGFpbi1yaW5nLWVhcmxvYmUtcm9zZS1nb2xkLWNyNjUtYi1yb3NlLWdvbGQuaHRtbA%3D%3D&source=gmail&ust=1460215609004000&usg=AFQjCNHiQ7uePUKn7qMoF5xqlvjDP1zgyQ"><img class="CToWUd" src="https://ci3.googleusercontent.com/proxy/1GKwB3DZSd0BPMDboD6iz7Ouq-wX00lP_G9TEUtJvjk3Gl5217FB6-q7E4qkCVjd5MVbYac2bUu9s5KrC8CNvpOQujvl5A-VraYMFfE8UzcBuw0O_MfbMdTOJhTWu9Rl5oVzd-4fVw=s0-d-e1-ft#https://www.venusbymariatash.com/media/catalog/product/C/R/CR65_B-ROSE_GOLD_1.png"
alt="" style="display:block" border="0" width="210"></a>
</td>
</tr>
<tr>
<td style="font-family:Arial,Helvetica,sans-serif;font-size:16px;color:#363636;font-weight:bold;line-height:16px;text-align:center;padding:0 0 15px">
1/4" Plain Ring (Earlobe) - ROSE GOLD
</td>
</tr>
<tr>
<td style="font-family:Arial,Helvetica,sans-serif;font-size:12px;color:#363636;line-height:16px;text-align:center">
$110.00
</td>
</tr>
</tbody>
</table>
<table style="border-collapse:collapse" align="right" border="0" cellpadding="0" cellspacing="0" width="210">
<tbody>
<tr>
<td>
<a href="https://app.remarkety.com/public/track/link/umk/NTcwNjdkNTdjMWJhMjIuODA4MDE3MzA1NzA2N2Q1N2M=/origurl/aHR0cHMlM0ElMkYlMkZ3d3cudmVudXNieW1hcmlhdGFzaC5jb20lMkYxNC1wbGFpbi1yaW5nLWVhcmxvYmUtd2hpdGUtZ29sZC1jcjY1LWItd2hpdGUtZ29sZC5odG1s" target="_blank"
data-saferedirecturl="https://www.google.com/url?hl=en&q=https://app.remarkety.com/public/track/link/umk/NTcwNjdkNTdjMWJhMjIuODA4MDE3MzA1NzA2N2Q1N2M%3D/origurl/aHR0cHMlM0ElMkYlMkZ3d3cudmVudXNieW1hcmlhdGFzaC5jb20lMkYxNC1wbGFpbi1yaW5nLWVhcmxvYmUtd2hpdGUtZ29sZC1jcjY1LWItd2hpdGUtZ29sZC5odG1s&source=gmail&ust=1460215609004000&usg=AFQjCNFtmdKjjV2n6xrI45EjJ6H9WBAXtA"><img class="CToWUd" src="https://ci6.googleusercontent.com/proxy/CL7UjYFnWe3FNZINIJJgPOVH18yP9nKSJZJdbbalv96XbhdRdiLweSYJ6DspRUu8KHjFGT9GCjVmgxAQY3Kpa7_aU5yUeMbdAha6dPGV4JVu16m2xSLjMgC3FA8qrs38xyWr1ygiyM0=s0-d-e1-ft#https://www.venusbymariatash.com/media/catalog/product/C/R/CR65_B-WHITE_GOLD_1.png"
alt="" style="display:block" border="0" width="210"></a>
</td>
</tr>
<tr>
<td style="font-family:Arial,Helvetica,sans-serif;font-size:16px;color:#363636;font-weight:bold;line-height:16px;text-align:center;padding:0 0 15px">
1/4" Plain Ring (Earlobe) - WHITE GOLD
</td>
</tr>
<tr>
<td style="font-family:Arial,Helvetica,sans-serif;font-size:12px;color:#363636;line-height:16px;text-align:center">
$110.00
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table style="border-collapse:collapse" align="right" border="0" cellpadding="0" cellspacing="0" width="210">
<tbody>
<tr>
<td>
<a href="https://app.remarkety.com/public/track/link/umk/NTcwNjdkNTdjMWJhMjIuODA4MDE3MzA1NzA2N2Q1N2M=/origurl/aHR0cHMlM0ElMkYlMkZ3d3cudmVudXNieW1hcmlhdGFzaC5jb20lMkY1MTYtZGlhbW9uZC1jb250aW51b3VzLWV0ZXJuaXR5LXJpbmctaGVsaXgtcm9zZS1nb2xkLWNldDhkMjItcm9zZS1nb2xkLmh0bWw="
target="_blank" data-saferedirecturl="https://www.google.com/url?hl=en&q=https://app.remarkety.com/public/track/link/umk/NTcwNjdkNTdjMWJhMjIuODA4MDE3MzA1NzA2N2Q1N2M%3D/origurl/aHR0cHMlM0ElMkYlMkZ3d3cudmVudXNieW1hcmlhdGFzaC5jb20lMkY1MTYtZGlhbW9uZC1jb250aW51b3VzLWV0ZXJuaXR5LXJpbmctaGVsaXgtcm9zZS1nb2xkLWNldDhkMjItcm9zZS1nb2xkLmh0bWw%3D&source=gmail&ust=1460215609004000&usg=AFQjCNGemmOPzKqjaMtL6JMsZ5o-WOOWLw"><img class="CToWUd" src="https://ci6.googleusercontent.com/proxy/oXpSdsWCQF_bW7AslUS7Fi71WwkcWjSpNklnWUJtDDgaxexkpoqVKaeIWTopPL8YfTZMqfOBV-jW7SV3DOGMi5Eq-o8FhU9JWH69-f-Ukh4dbVTeFoq9yCIuWWGmSwEOA6eaBgkxhzA=s0-d-e1-ft#https://www.venusbymariatash.com/media/catalog/product/C/E/CET8D22-ROSE_GOLD_1.png"
alt="" style="display:block" border="0" width="210"></a>
</td>
</tr>
<tr>
<td style="font-family:Arial,Helvetica,sans-serif;font-size:16px;color:#363636;font-weight:bold;line-height:16px;text-align:center;padding:0 0 15px">
5/16" Diamond Continuous Eternity Ring (Helix) - ROSE GOLD
</td>
</tr>
<tr>
<td style="font-family:Arial,Helvetica,sans-serif;font-size:12px;color:#363636;line-height:30px;text-align:center">
$515.00
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<table style="border-collapse:collapse" align="left" border="0" cellpadding="0" cellspacing="0" width="430">
<tbody>
<tr>
<td>
<table style="border-collapse:collapse" align="left" border="0" cellpadding="0" cellspacing="0" width="210">
<tbody>
<tr>
<td style="padding:20px 0 0">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="font-family:Arial,Helvetica,sans-serif;font-size:18px" align="center" bgcolor="#fff">
<a href="https://app.remarkety.com/public/track/link/umk/NTcwNjdkNTdjMWJhMjIuODA4MDE3MzA1NzA2N2Q1N2M=/origurl/aHR0cHMlM0ElMkYlMkZ3d3cudmVudXNieW1hcmlhdGFzaC5jb20lMkYxNC1wbGFpbi1yaW5nLWVhcmxvYmUtcm9zZS1nb2xkLWNyNjUtYi1yb3NlLWdvbGQuaHRtbA==" title="CHECKOUT"
style="color:rgb(255,255,255);text-decoration:none;display:inline-block;white-space:nowrap;padding:10px 50px;background-color:rgb(89,89,89);border-radius:5px" target="_blank" data-saferedirecturl="https://www.google.com/url?hl=en&q=https://app.remarkety.com/public/track/link/umk/NTcwNjdkNTdjMWJhMjIuODA4MDE3MzA1NzA2N2Q1N2M%3D/origurl/aHR0cHMlM0ElMkYlMkZ3d3cudmVudXNieW1hcmlhdGFzaC5jb20lMkYxNC1wbGFpbi1yaW5nLWVhcmxvYmUtcm9zZS1nb2xkLWNyNjUtYi1yb3NlLWdvbGQuaHRtbA%3D%3D&source=gmail&ust=1460215609004000&usg=AFQjCNHiQ7uePUKn7qMoF5xqlvjDP1zgyQ"><strong>CHECKOUT</strong></a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table style="border-collapse:collapse" align="right" border="0" cellpadding="0" cellspacing="0" width="210">
<tbody>
<tr>
<td style="padding:20px 0 0; min-height: 100px;">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="font-family:Arial,Helvetica,sans-serif;font-size:18px" align="center" bgcolor="#fff">
<a href="https://app.remarkety.com/public/track/link/umk/NTcwNjdkNTdjMWJhMjIuODA4MDE3MzA1NzA2N2Q1N2M=/origurl/aHR0cHMlM0ElMkYlMkZ3d3cudmVudXNieW1hcmlhdGFzaC5jb20lMkYxNC1wbGFpbi1yaW5nLWVhcmxvYmUtd2hpdGUtZ29sZC1jcjY1LWItd2hpdGUtZ29sZC5odG1s" title="CHECKOUT"
style="color:rgb(255,255,255);text-decoration:none;display:inline-block;white-space:nowrap;padding:10px 50px;background-color:rgb(89,89,89);border-radius:5px" target="_blank" data-saferedirecturl="https://www.google.com/url?hl=en&q=https://app.remarkety.com/public/track/link/umk/NTcwNjdkNTdjMWJhMjIuODA4MDE3MzA1NzA2N2Q1N2M%3D/origurl/aHR0cHMlM0ElMkYlMkZ3d3cudmVudXNieW1hcmlhdGFzaC5jb20lMkYxNC1wbGFpbi1yaW5nLWVhcmxvYmUtd2hpdGUtZ29sZC1jcjY1LWItd2hpdGUtZ29sZC5odG1s&source=gmail&ust=1460215609004000&usg=AFQjCNFtmdKjjV2n6xrI45EjJ6H9WBAXtA"><strong>CHECKOUT</strong></a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table style="border-collapse:collapse" align="right" border="0" cellpadding="0" cellspacing="0" width="210">
<tbody>
<tr>
<td style="padding:20px 0 0">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="font-family:Arial,Helvetica,sans-serif;font-size:18px" align="center" bgcolor="#fff">
<a href="https://app.remarkety.com/public/track/link/umk/NTcwNjdkNTdjMWJhMjIuODA4MDE3MzA1NzA2N2Q1N2M=/origurl/aHR0cHMlM0ElMkYlMkZ3d3cudmVudXNieW1hcmlhdGFzaC5jb20lMkY1MTYtZGlhbW9uZC1jb250aW51b3VzLWV0ZXJuaXR5LXJpbmctaGVsaXgtcm9zZS1nb2xkLWNldDhkMjItcm9zZS1nb2xkLmh0bWw="
title="CHECKOUT" style="color:rgb(255,255,255);text-decoration:none;display:inline-block;white-space:nowrap;padding:10px 50px;background-color:rgb(89,89,89);border-radius:5px" target="_blank" data-saferedirecturl="https://www.google.com/url?hl=en&q=https://app.remarkety.com/public/track/link/umk/NTcwNjdkNTdjMWJhMjIuODA4MDE3MzA1NzA2N2Q1N2M%3D/origurl/aHR0cHMlM0ElMkYlMkZ3d3cudmVudXNieW1hcmlhdGFzaC5jb20lMkY1MTYtZGlhbW9uZC1jb250aW51b3VzLWV0ZXJuaXR5LXJpbmctaGVsaXgtcm9zZS1nb2xkLWNldDhkMjItcm9zZS1nb2xkLmh0bWw%3D&source=gmail&ust=1460215609005000&usg=AFQjCNFsZwpDCF5k_yDAE66iSd1Sx1ObnQ"><strong>CHECKOUT</strong></a>
</td>
</tr>
<tr>
<td height="15">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Try applying a fixed height to the td containing the item titles (if the line-height is 16px, and you want to give 3 lines of space, set a height of 48px);
<td style="height:48px;font-family:Arial,Helvetica,sans-serif;font-size:16px;color:#363636;font-weight:bold;line-height:16px;text-align:center;padding:0 0 15px">
1/4" Plain Ring (Earlobe) - ROSE GOLD
</td>
You may have to remove padding.
Failing these, you could pull out the buttons as a whole other row (so long as each column was the same width as the column in the table above so everything lined up)
try using valign="bottom" attribute
I've got a HTML table with several cells inside, the border=0 property is set yet the border does not go away, what am I doing wrong?
<table width="500" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#CCCCCC">
<tr>
<td>
<table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#FFFFFF">
<tr>
<td>
<br><br>
</td>
</tr>
</table>
</td>
</tr>
</table>
Change the first cell spacing to 0
So here's the code:
<table width="500" border="0" align="center" cellpadding="0" cellspacing="0"
bgcolor="#CCCCCC">
<tr>
<td>
<table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#FFFFFF">
<tr>
<td><br>
<br></td>
</tr>
</table>
</td>
</tr>
</table>