E-mail header - Reduce space with email body

[Babis_Mate]

Hello,

I am creating an e-mail template, but I can't find any way to vertical-align the text in the bottom and also reduce that space. I tried to add "vertical-align: bottom", "margin-bottom: -5%", reduce the line-height, but nothing worked. No matter if I add CSS in the <td> or <tr> or the widget, nothing works. Does anyone have any idea on how to achieve this?

[sharonlicari]

Hi @Babis_Mate 

Welcome to the Community!

Could you please share the code you are using? With this information will be able to tag a few experts that can share their thoughts with you

Thanks

Sharon

[Babis_Mate]

Hello Sharon,

sure! I used the @hubspot/linked_image and the @hubspot/rich_text modules. Please find below the current header code.

<div class="header-container-wrapper">
<tr>
<td align="center" valign="bottom" class="bodyContent" width="100%" colspan="12">
<table cellpadding="0" cellspacing="0" border="0" width="100%" class="templateColumnWrapper">
            <tr>
<td valign="bottom" colspan=12 width="100.0%" class=" column" style="width:100.0%; text-align: center; padding: 0; font-family: {{ primary_font }}; font-size: {{ primary_font_size }}; line-height: 1em; color: {{ primary_font_color }}; display: table-cell; vertical-align: bottom">

<table cellpadding="0" cellspacing="0" border="0" width="100%">
    <tr>
<td align="center" valign="bottom" class="bodyContent" width="100%" colspan="12">
<table cellpadding="0" cellspacing="0" border="0" width="100%" class="templateColumnWrapper">
                <tr style="border-spacing: 0px; padding: 0px; line-height: 1em;">
<td valign="bottom" colspan=3 width="30.0%" class=" column" style="width:20.0%; text-align: center; padding: 0; font-family: {{ primary_font }}; font-size: {{ primary_font_size }}; line-height: 1em; color: {{ primary_font_color }}; display: table-cell; vertical-align: bottom">

<div class="widget-span widget-type-custom_widget " style="padding-left: 24px; width: 20%" data-widget-type="custom_widget">
<div class="layout-widget-wrapper">
{% module_block module "module_1610380595363553" wrapping_html='', per_widget_wrapper_html='', overrideable=True, widget_name='Image', module_id=1155231, path='@hubspot/linked_image', img='{"src":"https://f.hubspotusercontent00.net/hubfs/8725702/Pix4D_logo.png","alt":"Pix4D_logo","width":100,"height":57}', label='Image' %}
  {% end_module_block %}
</div><!--end layout-widget-wrapper -->
</div><!--end widget-span -->
       </td>
<td valign="bottom" colspan=4 width="45.0%" class=" column" style="width:25.0%; text-align: center; padding: 0; font-family: {{ primary_font }}; font-size: {{ primary_font_size }}; line-height: 1em; color:  {{ primary_font_color }}; display: table-cell; vertical-align: bottom ">

<div class="widget-span widget-type-custom_widget " style="text-align: center" data-widget-type="custom_widget">
<div class="layout-widget-wrapper" style="vertical-align: bottom"> <!-- header 2nd column -->
{% module_block module "module_1610379802954380" wrapping_html='', per_widget_wrapper_html='', overrideable=True, widget_name='Rich Text', module_id=1155639, path='@hubspot/rich_text', label='Rich Text' %}
  {% end_module_block %}
</div><!--end layout-widget-wrapper -->
</div><!--end widget-span -->
       </td>
<td valign="bottom" colspan=4 width="45.0%" class=" column" style="width:25.0%; text-align: center; padding: 0; font-family: {{ primary_font }}; font-size: {{ primary_font_size }}; line-height: 1em; color: {{ primary_font_color }}; display: table-cell; vertical-align: bottom">

<div class="widget-span widget-type-custom_widget " style="text-align: center" data-widget-type="custom_widget">
<div class="layout-widget-wrapper">
{% module_block module "module_1610379872954340" wrapping_html='', per_widget_wrapper_html='', overrideable=True, widget_name='Rich Text', module_id=1155639, path='@hubspot/rich_text', label='Rich Text' %}
  {% end_module_block %}
</div><!--end layout-widget-wrapper -->
</div><!--end widget-span -->
       </td>
               </tr>
        </table>
       </td>
   </tr>
</table>
</td>
           </tr>
    </table>
   </td>
</tr>
</div>

[Babis_Mate · Accepted solution]

Sorry for the buzz, I just figured it out. There was a code issue, I mistyped padding-top

[PamCotton]

Thank you for sharing your solution @Babis_Mate