How to Create a Responsive HTML Email Template (Mobile vs Desktop)?

[KingdomCoder]

Hi everyone,

I'm trying to create an email template in EspoCRM using HTML. I want the email to look different on mobile devices than on desktop — for example, different font sizes or layout adjustments.

I’ve already tried using CSS media queries in the <style> tag and inline, but it doesn’t seem to work. The layout stays the same on both mobile and desktop when I test the email.

Is it possible to use responsive design techniques (like media queries) in EspoCRM email templates? If so, could someone share an example or explain the best approach?

Thanks in advance!

[esforim]

I don't think it possible, but I could be wrong. I recommend you use AI to give it a try.

I recently update our email signature through this method than using WYSIWYG tool online.

[rabii]

Espocrm use contenteditable which strip any media query. so unfortunately no. I am working on a commercial extension to add an html email builder to the email template.

[shalmaxb]

I use bootstrap to create email-Templates and these are responsive. For a custom Newsletter entity, I use the HTML of that template, fill it by placeholders and send it. It looks different on mobile and desktop, see screenshots:

Desktop


Mobile