Hi,
I’ve been working on this newsletter for my company and its a99% complete except for this one little issue which seems so simple yet, i can’t get it right. I’ve been trying to fix this for the last 2 days and i can’t get it right.
Basically i have an image on the left side and text on right. The problem is that the bottom lines are not on the same height. its 50/50 column built on mjml and running the tests on hubspot does not display it correctly. the content side is lower higher than the image side and its like this on email platforms when running on hubspot. the fixes i’ve tried do not make a diff
here is the code for the table:
<!--[if mso | IE]><tr><td class="" width="600px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" bgcolor="#F1F1F1" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="background:#F1F1F1;background-color:#F1F1F1;margin:0px auto;max-width:600px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#F1F1F1;background-color:#F1F1F1;width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:25px;padding-top:0px;text-align:center;">
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:269.5px;" ><![endif]-->
<div class="mj-column-per-50 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr>
<td style="background-color:#FFFFFF;vertical-align:top;padding-top:20px;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style width="100%">
<tbody>
<tr>
<td align="center" style="font-size:0px;padding:10px 25px;padding-top:0px;padding-bottom:20px;word-break:break-word;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;">
<tbody>
<tr>
<td style="width:219px;">
<img src="{{ module.image_field.src }}" width="100%" height="240px" alt="{{ module.image_field.alt }}">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td><td class="" style="vertical-align:top;width:269.5px;" ><![endif]-->
<div class="mj-column-per-50 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr>
<td style="background-color:#FFFFFF;vertical-align:top;padding-top:20px;padding-bottom:20px;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style width="100%">
<tbody>
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;padding-bottom:0px;word-break:break-word;">
<div style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:10px;font-weight:bold;line-height:1;text-align:left;color:#5A2375;">{{module.content_type}}</div>
</td>
</tr>
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;padding-bottom:5px;word-break:break-word;">
<div style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:20px;font-weight:bold;line-height:1;text-align:left;color:#444444;">{{module.title}}</div>
</td>
</tr>
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;padding-bottom:25px;word-break:break-word;">
<div style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:9px;line-height:18px;text-align:left;color:#444444;">{{module.content}}</div>
</td>
</tr>
<tr>
<td align="left" vertical-align="middle" style="font-size:0px;padding:15px 30px;padding-top:0;padding-right:25px;padding-bottom:10px;padding-left:25px;word-break:break-word;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;">
<tr>
<td align="center" bgcolor="#4B1268" role="presentation" style="border:none;border-radius:0;cursor:auto;mso-padding-alt:10px 25px;background:#4B1268;" valign="middle">
<a href="{{module.button_link}}" style="display:inline-block;background:#4B1268;color:#FFFFFE;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:8px;font-weight:bold;line-height:120%;margin:0;text-decoration:none;text-transform:none;padding:10px 25px;mso-padding-alt:0px;border-radius:0;" target="_blank"> {{module.button_text}}</a>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table></td></tr><![endif]-->
if more code or the whole template is needed please let know. i’d really like this fixed asap, as its just got to annoying, so all help is appreciated.
Best Regards
Zaki