Removing the padding for a custom module in drag and drop email



I'm currently trying to fit a custom module to full width inside a drag and drop email template (newsletter). I order to do this I created a boolean field for the module and added the following code: 


{% if !module.padding_element %} 
width="auto" style="margin-left:-20px !important; margin-right:-20px !important;"
{% endif %}


This pushes the margin to -20px and the width: auto automatically adjusts to accommodate that. This looks fine in the email builder, but the email body padding is pushed outside the body in Outlook 2016. Setting a fixed width will achieve the same result. 

The entire module is wrapped in padding:20px 10px, so I would need a way to override this. I came across no_wrapper = true parameter but I couldn't get it to work.


test email in outlook.PNG


Preview (one module has a negative margin, the other has the following condition

{% if module.two_col_eql_with_top_image == 'Yes' %}
{% set no_wrapper = true %}


For completion, I will add the logic for the code below.


Please let me know if you have managed successfully implement something similar and what method you used.





{% if module.two_col_eql_with_top_image == 'Yes' %}
<table class="two-colun-equal-top-image-email" align="center" cellpadding="0" cellspacing="0" border="0"  width="100%" {% if !module.padding_element %} width="auto" style="margin-left:-20px !important; margin-right:-20px !important;" {% endif %}>
  {* The rest of the code here *}
{% endif%}
3 Replies 3
Recognized Expert

Hello @Aaaaandrei 


When viewing the provided page I'm not seeing this issue as per the images.

Have you resolved this? And if so how did you accomplish it?


Hi @Kevin-C 

The issue occurs when opening the email in Outlook 2016 on desktop. It does not show in the HubSpot preview. 

Top Contributor | Platinum Partner

Hey @Aaaaandrei , negative margin is a no no in email development. Email clients like Outlook use an old Microsoft Word html rendering engine that do funky things with some css.

Will you please help the community and give me some street cred by marking my answer as a solution if helped you? I now own a minivan and my cool points are on empty.

Curious cats can find me at Ascend Inbound Marketing