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

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.

I like kudos almost as much as cake – a close second.