function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Rung41Rung41 

Responsive Email Template Issue

Wondering if anyone has experienced this issue and has a solution or workaround to get responsive email templates working with Salesforce email templates.

I use an application to build responsive emails, which provides all the html with inline css . When I send a test with with the application or a third party service, it gets delivered with no layout anomalies.
However, when I past the code into a "Custom" Salesforce email template, save it, and send a test, the layout is all distorted on mobile devices. I am guessing Salesforce is ignoring or removing some of the inline CSS. 

Any suggestions to this issue?

ShashankShashank (Salesforce Developers) 
Please see if this helps: https://developer.salesforce.com/docs/atlas.en-us.salesforce1.meta/salesforce1/vf_dev_best_practices_design_considerations.htm
MG ConsultingMG Consulting
Did you ever figure this out? I'm having the exact same issue.
Rung41Rung41
Unfortunately, I did not. 
Jitender PaddaJitender Padda
Hi Rung41,

You can try this solution on the appexchange - BeeFree (https://appexchange.salesforce.com/listingDetail?listingId=a0N3A00000E1lGQUAZ).It provides an Email Template editor directly inside Salesforce and helps you create a responsive email template which you can use with email alerts.

Hope it helps !
Dave CortrightDave Cortright
Not sure if this is the same issue, but in my tests I noticed that SalesForce for some dumb reason would change my height tag into min-height. This meant the width (which was set to 100%) would be dynamic, but the height would be static, thus distrting the image.

The workaround I found is to set empty width and height parameters on the image tag, and use !important in the inline style declaration, which prevented SalesForce from "helpfully" inserting their own. 
<img style="width:100%!important; height:auto!important;" src="image.png" width height />
Hope this helps someone else. Cheers,

·Dave