CODEWITHSUNDEEP
cssimageemailresponsive-designresponsive-emails
Ian
Ian

Reputation: 45

Responsive images in email

I'm wanting to serve an image to mobile devices and different image to desktop devices in an email. display: none works well for everything but Outlook and Gmail. The image has a button on it, but on mobile, the text in the button gets too small. Any ideas?

Upvotes: 1

Views: 1355

Answers (2)

Sarah Groß
Sarah Groß

Reputation: 10879

Good to see that you found a solution that works for you. Should you or anyone else need display: none for mail clients in the future: for Outlook it's mso-hide: all and Gmail should work with display: none as long as it's in an inline style attribute, or height: 0; width: 0; overflow: hidden;

Upvotes: 1

Ian
Ian

Reputation: 45

What I ended up doing:

<head>
<style type="text/css">
    @media only screen and (max-width: 480px){
       img {content: url(http://images4.fanpop.com/image/photos/17000000/Nature-s-jewerly-love-you-natures-seasons-17036569-500-500.jpg)}
    }
</style>
<body>
    <img img src="http://data.whicdn.com/images/28179582/Nature-Photography-Rain-520x520_large.jpg" width="500" height="500">
</body>

iPhone and Android can handle content, which for me are the only mobile devices I have to worry about. They serve the image that I want, and the other desktop devices stay with the original image.

Upvotes: 0

Related Questions