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

[Aaaaandrei]

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.

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

[Aaaaandrei]

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.

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

[Kevin-C]

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?

[Aaaaandrei]

Hi @Kevin-C 

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

[John]

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.