E-mail header - Reduce space with email body

Marketing & Content Hub Email Marketing Tool
,
1

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?

36540i73777B2270556053.png
36540i73777B2270556053.png400×178 18.4 KB

2

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

3

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>
4

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

5

Thank you for sharing your solution @Babis_Mate