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

Hey, @ow-roxas thanks for reaching out! Let’s see if we can get the conversation going. @Anton @MFischer @DM2, do you have any quick tips for @ow-roxas?

Thank you! — Jaycee

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