Feb 14, 2019 7:08 AM - edited Feb 14, 2019 7:14 AM
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 %}
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%}
Feb 15, 2019 8:48 AM
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?
Feb 15, 2019 8:51 AM
Hi @Kevin-C
The issue occurs when opening the email in Outlook 2016 on desktop. It does not show in the HubSpot preview.
Feb 17, 2019 2:19 PM
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.