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?
Asked
Active
Viewed 1,268 times
1
Ian
- 45
- 8
2 Answers
1
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;
Constantin Groß
- 10,719
- 4
- 24
- 50
-
Interesting. I was just going off of this round up https://www.campaignmonitor.com/css/b/ that said `display: none` wasn't possible for gmail. – Ian Mar 21 '16 at 20:17
0
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.
Ian
- 45
- 8