Creating custom css in email modules

Developer Support CMS Development
1

Hi
I’m trying to create a few custom email modules that can later be used as drag and drop into an email.
I’ve tried with using just style tag and I’ve tried using {% require_css %} marking the style tag as <style type=“text/css” data-hse-inline-css=“true”>
and most other solutions I’ve found online.
I basically want to add the media queries to the header for the modules that are included in a given email.
I know that some responsive email templates offer the ‘column’ class option. This could do, but it’s not good enough since I want to change padding etc etc based on the media query.
Is anything like this possible?
An example is something like this:

<div style="background-color: {{ module.background_color.color }}; max-width: 600px; margin: 0 auto; width: 100%;">
 <style>
 @media only screen and (max-width: 600px) {
 .stack-on-mobile {
 display: block;
 width: 100%;
 max-width: 100% !important;
 }
 .full-width-on-mobile, .image-full-width-on-mobile {
 width: 100% !important;
 }
 }
 </style> 
 <table border="0" cellpadding="0" cellspacing="0" width="100%">
 <tr>
 <td class="stack-on-mobile full-width-on-mobile" style="width: 50%; padding: 16px; box-sizing: border-box;">
 {% inline_rich_text field="body_text" value="{{ module.body_text }}" %}
 </td>
 <td class="stack-on-mobile image-full-width-on-mobile" style="width: 50%; vertical-align: top; padding: 16px; padding-right: 0px; box-sizing: border-box;">
 {% if module.image_field.src %}
 <img alt="{{ module.image_field.alt }}" src="{{ module.image_field.src }}" style="width: 100%; height: auto; display: block; margin: 0 auto;">
 {% endif %}
 </td>
 </tr>
 </table> 
</div>
2

Hi @MRostgaard,
Thank you for your post on the Community!
I understand that you’d like to create a custom module for emails that contains a media query element to make it responsive depending on the size of the screen, right?
I’d like to share these resources that might be of interest:
- Mastering Media Queries [Support Series]
- This thread about “How to custom responsive text module”
- The Complete Guide to CSS Media Queries
I also wanted to invite a couple of subject matter experts to this conversation @Anton, @Teun and @Stephanie-OG do you have tips to help @MRostgaard, please?
If anybody else has anything to add and/or share, please feel free to join in the conversation :slightly_smiling_face:
Thank you so much and enjoy the day!
Best,
Bérangère

3

Hi Bérangère
Thank you for your answer
I already know how to use media quries and making things responsive. I want to know how to get the responsive elements from a hubspot email module into the email being sent.
Just adding the <style> tags in the module doesn’t work as gmail, for example, only reads inline css and styles from the header. So I need to get my styles from the <styles> tag into the header of the email before sending it.
Best
Mark

4

Thank you for looping me in @BérangèreL !

@MRostgaard - I barely work with email anymore because, honestly, email development is just not fun (and HubSpot’s newer drag-and-drop email editors are pretty good!), so there’s a chance I’m missing something.

In the old (not drag-and-drop) email templates that you build in the Design Tools there was an option to add to the email header (of a template, not modules), so you could add media queries (supported by some email clients):

email-head-html.png
email-head-html.png1920×885 213 KB

Additional <head> markup in email templates

However, I’m pretty sure that in the newer drag-and-drop templates there is no way to update the header. I’ve tried in the past with no success.

So I think the only workaround would be to build the older style emails, which I wouldn’t recommend since they’re a lot less flexible.

5

Hi Stephanie
Thank you for your reply and your thoughts on the matter :slightly_smiling_face: I will have to look into what I should do. But at the end of the day, what you are saying is that it’s not possible to make custom modules responsive while using them from the drag and drop editor?

6

In what way are you trying to make them responsive?

If you create a custom module and use it in a drag-and-drop email, you can use the same module side-by-side in different columns and HubSpot will stack the modules on mobile.

If you’re trying to make your own full-width module that has columns that stack on mobile, you could do as Anton said and use HubSpot’s existing classes. In the past I’ve just created a simple email in HubSpot’s drag-and-drop editor and sent it to myself to view and copy the structure/classes, then added my own code within (taking a quick look now, there’s a chance they’ve updated those).

There’s also tricks to nest tables that stack up (because email development) that you could use since media queries aren’t always supported.

As Anton suggested, a fully coded template is probably the way to go if you want complete control over the code, but it will remove the drag-and-drop functionality from the editor.

7

Hi Stephanie
Yeah I decided to break down the design into smaller more modular modules instead and then use hubspots, it seems to work like expected
Thank you so much for taking the time to answer my questions I think I get the drag and drop much better now :slightly_smiling_face:

8

Hi @MRostgaard,

email development is quite hard and tedious since almost every email client requires specific code. Outlook and GMail are the “best” ones (not). For my knowledge the current Outlook desktop app is still build upon the Word engine and we all know the Word jokes - Outlook takes them to a whole other level. Outlook online(office365) is a lot better and does a few more things right than the desktop app. GMail can be an fun time too since it rewrites everything to its “logic”/“syntax”. If GMail discovers something it doesn’t like during the rewrite it drops the whole part of the code. For instance both clients will even drop some inline-stylings that are specific. Something I’ve discovered a while ago is Can I email… All HTML and CSS features on Can I email… which will show you CSS options and which client supports it.

As for HubSpot, unfortunately

{% require_css %}
<style>
...
</style>
{% end_require_css %}

doesn’t work in email modules.

Like @Stephanie-OG mentioned in the good old days where you could build email templates inside the design-manager you had the option to implement a style-tag in the <head> but the new drag&drop builder doesn’t support this feature.

The only real possible solution is to create a custom email template. The benefit is you can do almost everything there but the big downside of this is that you’ll lose the drag&drop functionality.

Something that can work is to use the HubSpot email classes. To get them simply create your desired layout of your module in a drag&drop email, preview the email and inspect the section to get the classes or even whole the layout. If you want to get the classes, copy them and paste them into your custom module. Or layout the whole part/section, paste it into your module and insert your module functionality.

Tipp:You can paste/write

{{ module.body_text }}

instead of

{% inline_rich_text field="body_text" value="{{ module.body_text }}" %}

can be easier to code

hope this helps,

best,

Anton

9

Hi Anton
Thanks for the reply and the great answer.
I think I need to understand it 100% though. As I asked Stephanie, what you are saying is that it’s not possible to create a custom module that is responsive, while using the drag and drop editor?
I looked at this:

MRostgaard_0-1697708474863.png
MRostgaard_0-1697708474863.png1137×1358 208 KB

And while it is not 100% perfect for my needs, it might solve some of my problems. Is it possibly to use that template in the drag and drop editor and have the column styles applied to my modules in that template?