Email module can't force restyling
I created an emai l and try to restyle the icon (position in the central of the div)
with a moduel file with the </style> tag and place it on the top of the email (which should be invisible).
That being said, the code doesn't work.
Just wondering is there any other solution or have I done something wrong with the code?
Thank you so much!
Roxas
Email module can't force restyling
Hi @ow-roxas,
in email modules <style>-tags doesn't work the same way as in page modules. The reason for that is, that many email clients will cut all <style>-tags that are not in the <head>-tag. Also: I recommend to write it like this for page modules
{% require_css %}
<style>
...
</style>
{% end_require_css %}by doing so your <style>-tag will be placed in the <head>-tag. But this doesn't work in email modules, too.
As this is a media-query: Most clients - especially GMail - don't understand them.
The best way, easiest and almost only way how you can achieve true responsive modules is to write a HTML template like described in the documentation since you have full control over the <head>-tag. A great helper tool for this is mjml.io.
- create a blank email template
- write the whole layout in mjml
- copy/paste the generated HTML to HubSpot
- add Hubl to template
- test it
- create email with this template
- test it
- done
Tipp: create the template first and then create modules for this special tempalte. Put every <style>-tag into the <head> of the template - not into modules. And run real-live tests. Not just the "test clients" function in HubSpot. There can be A LOT of differences.
best,
Anton
