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

Highlighted
Regular Contributor

Hi,

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 %}

https://qs.topuniversities.com/-temporary-slug-8712619c-3703-41b6-a00b-6b300a65170d?hs_preview=YNotI...

 

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.

 

Cheers,

Andrei

 

{% 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 *}
</table>
{% endif%}
3 Replies 3
Highlighted
Regular Advisor | 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?

0 Upvotes
Highlighted
Regular Contributor

Hi @Kevin-C 

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

0 Upvotes
Esteemed 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'm fixing to buy a minivan and my cool points are running low.

Curious cats can find me at Ascend Inbound Marketing