Styling the email notifications

I could not find a solution to this issue. Searched the forum, found some articles, but none of them really applied to the issue I’m facing, which is simple email notification STYLING.

I’ve created a new form notification from scratch, “disabled auto formatting”. I can style it the way I like it in the notifications text editor and it will display fine within the editor, but as soon as I actually use the form to have the notification sent to me the proper formatting is gone (or overwritten).

In particular I’m talking about the distance between the lines (marked red). I don’t want to waste the red space. As I said, I can use padding, line-height, margin CSS properties in the editor and it will look just the way I want it inside the editor. But when receiving the actual email, the red space is always the same, no matter what I do in the editor.

Can anybody help?

You need to build the html email inside an email builder which will add all of the proper tags and breakpoints for different email service providers a d screen sizes.

Then export the html template. Lastly add your merge tags.

I just want the simplest and slimmest of all emails. Nothing fancy at all. Just a super basic table layout with limited line height. Actually I want exactly as shown on my screenshot but with me being able to adjust the line height.

I understand but email styling is different than browser styling for websites.

That’s just my suggestion.

We’re much more constrained when styling emails than in general web development. Any kind of layout is likely going to need to be created using tables, and all your CSS should be inline. It’s a similar experience to developing web layouts back in 1999. To make it even more challenging, email providers aren’t all on the same page as to what styling they’ll actually use. It’s getting better, but still a pain.

Here are some resources that may help:

https://responsivehtmlemail.com/css-styling-in-html-email/

Good luck!

3 Likes

Hello. Perhaps not the same challenge, but I had needed something extra in an email notification and ended up using Zapier and triggering the email to be sent through gmail.

1 Like

Had the same issue, and asked the same question recently.

Tried a few email builders and ended up using topol.io that produced emails that work across clients.

2 Likes

Looks pretty neat. Thanks for sharing.

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.