2

I want to implement a responsive image in an email newsletter for e.g. mobile phones. For this I used this code snippet from templates.mailchimp.com and inserted it into the body above the image I want to be changed:

<style type="text/css">
@media only screen and (max-width: 480px){
    .emailImage {
        height:auto !important;
        max-width:600px !important;
        width: 100% !important;
    }
}
</style>

For the pictures I wanted to be responsive I added the class=”emailImage”. Sadly now, this doesn’t work. Anyone can explain why or give a better solution for my problem? If necessary here is the complete code from my newsletter: http://pastebin.de/39651?

Thanks

user3275368
  • 21
  • 1
  • 2
  • 1
    If we're lucky, this kind of functionality will be supported by E-Mail clients in early 2028. See [CSS classes in email](http://stackoverflow.com/q/4466439) – Pekka Feb 05 '14 at 13:56
  • 4
    Also see http://www.campaignmonitor.com/css/ for an overview of what features are supported in which clients – Pekka Feb 05 '14 at 13:58

3 Answers3

2

Try this:

<style type="text/css">
@media screen and (max-width: 480px){
    img[class="emailImage"] {
        width: 100% !important;
    }
}
</style>

<img class="emailImage" src="path/to/img" style="width: 600px; height:auto;" width="600">

This is same code I used for my newsletter and it works fine. I will update my answer later when I find references as to why this particular way of styling is necessary and for what mail clients, it's been a while since I did that code.

UPDATE: using attribute selectors inside media queries is workaround for Yahoo mail bug which gives precedence to styles inside media queries over inline ones.

Max-width support across mail clients is pretty limited so safer way is just specify image width as inline style (that gets trumped in MQ using !important). Since height is always auto it can just be defined inline. Global attributes are used as ultimate fallback just in case some mail clients decide to ignore or strip inline styling.

Also, in (kinda) complex mail layouts that image element will probably be inside some table in which case table element must also have same set of properties inline and inside media query for it to be responsive.

Useful link: CSS support across mail clients

Teo Dragovic
  • 3,438
  • 20
  • 34
1

Emails as HTML do not support CSS (at least not all email clients support this feature yet). You'll have to use the old-school HTML stuff such as <img src="some-URL.png" width="100" height="200">

btw, you may also try to use inline style attribute on the HTML tag itself. It might works for some email clients.

Check out this post for "best-practices" with emails and HTMLs

Community
  • 1
  • 1
Ziv Levy
  • 1,904
  • 2
  • 21
  • 32
  • I don't understand, why all support your answer, but it is wrong! in this example he uses styles for responsive design in media queries section and this will work for mobile email clients – Slawa Eremin Feb 05 '14 at 14:19
  • @SlawaEremkin The issue is not with the CSS rules or media queries in the question. My point is that most email clients, even Google's Gmail, ignore styling sections or files linked to the HTML. Hence, my solution is, if fits, to use the old HTML styling attributes or use inline style attribute. I also referred to other post that summarizes this issue pretty well. – Ziv Levy Feb 05 '14 at 14:30
-1

Most email clients have terrible support for CSS. Most clients strip the of your email template so you shouldn't include important CSS in there. It could also be the fact that certain clients strip class names from email, or reformat them, or refuse to understand media queries or a myriad of other possible issues.

The solution is to simply write all CSS inline on each and every element. Regular max-width: 100% and height: auto should be sufficient.

There are tools that convert an external set of styles and class names to inline styles. That does prevent you from using media queries so make sure you don't depend on them to render your email.

Edit: Since you seem to be using Mailchimp, have a look at their article on CSS in HTML emails.

Nils Kaspersson
  • 8,816
  • 3
  • 29
  • 30