0

does anyone successfully create a responsive email at drupal? I mean, with @media rule, but not just using width percentage(like 100%) to control element width.

We got one request to build two different email styles for pc and phone. We need different font size and different element width for this email. Now the email for pc is done, but I can't figure out an appropriate way to do the email for phone. I tried @media rule in css, but the @media rule will overwrite the regular css rule in pc too.

I sense it might be the reason that I have converted css class to inline css, so media rule is not working. However, inline css in email is recommended to meet most of the email clients out there, and I see the good email, like email from linkedin, uses the inline css too. The email from linkedin displays differently in phone and works perfect as an example of responsive email, having smaller image size, font size, element width and so on.

I tried this email template from this article https://www.emailonacid.com/blog/details/C13/emailology_a_free_responsive_email_template_using_media_queries_-_part_i# It doesn't work for me. The email at phone email client looks the same way as the email showing at pc. Not sure why this email template works for others, but not for me, or not for drupal?

For the record, I'm using mimeemail in Drupal6 and writing the code to send email directly.

Does anyone has idea to solve this issue? Any help will be appreciated, thanks!

1 Answer 1

1

Okay, this issue is solved by this module https://www.drupal.org/sandbox/dmitriytrt/1939698.

The issue happens because default "mimemail css compressor" module has excluded @media rules in email, so we need a different way of converting css to inline styles.

Another possible solution is to use emogrifier https://github.com/jjriv/emogrifier. This library's latest version has supported @media rules.

1
  • Yes the drupal module and github libribrary look like good solutions to the problem you had with the CSS rules.
    – tenken
    Sep 24, 2014 at 4:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.