The email doesn't display correctly for Gmail
jeff-pang opened this issue · comments
@jeff-pang A copy of your html used will likely be necessary to help you :)
Hey @jeff-pang,
Gmail tends to render our templates like this when a CSS inliner isn't being used. Are you inlining your CSS before sending?
Also, can you provide your HTML? That should help me troubleshoot the issue.
Hi, Thanks for the response. Attached is the html template, I am using Razor syntax. (github doesnt like .html extention, so changed to .txt)
Thanks, @jeff-pang. The only issue with your template was on line 159 and 165. The media query syntax should only be prefixed with a single @, instead of two. However, this isn't what's causing your issue with Gmail.
I ran your template through some tests and could only reproduce the Gmail issue when the CSS wasn't being inlined. Unfortunately, Gmail removes the HEAD tag on all HTML emails so I recommend that you inline your CSS before sending. Here are some tools that will help:
- http://templates.mailchimp.com/resources/inline-css
- https://inlinestyler.torchbox.com
- https://github.com/wildbit/style-merge
- https://github.com/peterbe/premailer
These depend on your preference and workflow, so it's totally up to you. It's incredibly hard to manage inline CSS when it's applied across a bunch of HTML elements so we decided not to store our templates like this.
Also, if you send your emails with Postmark, we provide a template manager that will take care of this for you. You can read more about it here: https://postmarkapp.com/why/integrations.
the double @@ is the escape character for razor view engine which will become a single @ post-render
thanks for your explanation and suggestion. i guess in that case ill just inline the css and close the issue thanks