Email Marketing Tool

Babis_Mate
Contributor

E-mail header - Reduce space with email body

SOLVE

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?

Babis_Mate_1-1610714824127.png

 

 

0 Upvotes
1 Accepted solution
Babis_Mate
Solution
Contributor

E-mail header - Reduce space with email body

SOLVE

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

 

View solution in original post

4 Replies 4
sharonlicari
Community Manager
Community Manager

E-mail header - Reduce space with email body

SOLVE

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


Did you know that the Community is available in other languages?
Join regional conversations by changing your language settings !




0 Upvotes
Babis_Mate
Contributor

E-mail header - Reduce space with email body

SOLVE

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>

 

0 Upvotes
Babis_Mate
Solution
Contributor

E-mail header - Reduce space with email body

SOLVE

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

 

PamCotton
Community Manager
Community Manager

E-mail header - Reduce space with email body

SOLVE

Thank you for sharing your solution @Babis_Mate 

Você sabia que a Comunidade está disponível em outros idiomas?
Participe de conversas regionais, alterando suas configurações de idioma !


Did you know that the Community is available in other languages?
Join regional conversations by changing your language settings !