Cerberus icon indicating copy to clipboard operation
Cerberus copied to clipboard

Forwarding email sent from mailchimp

Open maxackerman opened this issue 3 years ago • 4 comments

Thank you for creating and sharing these templates!

I’m using the responsive template and sending email through mailchimp using their import from urlimport from url feature. this results in css inlining that can’t be disabled. (I realize this is not recommended and may be the source of my issue, but sharing here in case anyone has some insight. it is very hard to debug!)

initially the emails look great and the responsiveness is working. however if the email is forwarded from ios gmail app to ios gmail app, it becomes completely illegible. the images mostly disappeared and the text appears in a column one character wide.

i’m not looking for pixel perfect layout after forwarding but hoping to keep some level of legibility.

  • the same emails look fine when viewed in the ios mail app
  • the gmail desktop web view looks fine

screenshots of the original responsive template after being sent through mailchimp and forwarded on gmail ios mobile app:

D8AB576E-F5A2-467E-9D8C-93F18C39561D 51507A1B-CD6F-48E0-B733-F2AC6C929F2E

note: i’m using the mailchimp import via html feature to pull in emails generated from a cms.

maxackerman avatar May 27 '21 03:05 maxackerman

i found the culprit. i was caused by line 93:

table-layout: fixed !important;

that was getting in-lined to every table element, and causing issues when forwarded

maxackerman avatar May 27 '21 16:05 maxackerman

@maxackerman Oh yea def. want to turn off inlining. If Mailchimp doesn't offer that option when importing from a URL, can you copy/paste the Cerberus markup into a blank email and turn off inlining that way?

TedGoas avatar May 27 '21 23:05 TedGoas

Hey @TedGoas ! Mailchimp does allow you to disable inlining when pasting in code, but not when importing from a URL 🤦 This is a bummer as we are using the import feature to dynamically get the emails from our CMS as they are sent.

Removing table-layout: fixed !important; has worked as a quick fix, not seeing any issues yet. But I'm also going to test wrapping styles in @media all { } to prevent them from getting inlined. That's a trick I saw in this template

maxackerman avatar Jun 01 '21 22:06 maxackerman

Oh that's neat trick, thanks for pointing that out. I can see how that's be helpful without making these template more complicated.

TedGoas avatar Jun 02 '21 00:06 TedGoas