Padding issue on emails help

[ZMunshi]

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

[webdew · Accepted solution]

Hi @ZMunshi ,

You can remove the padding with the help of custom CSS and use ! important.

Hope this helps!

If we were able to answer your query, kindly help the community by marking it as a solution.

Thanks and Regards.

[John · Accepted solution]

Not sure if you're trying to bottom align the content or not, but if you want to get rid of that space at the bottom then make the wrapping table background color #ffffff and it will look uniform

[webdew · Accepted solution]

Hi @ZMunshi ,

You can remove the padding with the help of custom CSS and use ! important.

Hope this helps!

If we were able to answer your query, kindly help the community by marking it as a solution.

Thanks and Regards.

[Teun]

Hi @ZMunshi ,

Is this all the code there is? It seems as if a part of the styling is missing. I'm trying to recreate this, but can not get the same result with the code you shared.

[natsumimori]

Thank you for your post Zaki.

I wanted to tag in @Teun and @Anton who have shared great CMS knowledge in the Community before. Teun & Anton, would you be able to share your advice here?