How to display a different image according to the device used by the recipient
-
Add the
title-img-responsiveclass on the desktop image (already added in our template) -
Add the
title-img-responsiveAND themobileclass on the mobile image (already added in our template)
example:
class="title-img-responsive mobile"
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td align="center">
<!-- desktop Image -->
<img src="http://desktop.jpg" height="300" width="600" style="padding: 0px; text-align: center; height: 362px; width: 620px; border: 0px;" class="title-img-responsive ">
<!-- /desktop Image -->
<!-- mobile image -->
<img src="http://mobile.jpg" height="300" width="600" style="padding: 0px; text-align: center; height: 362px; width: 620px; border: 0px;" class="title-img-responsive mobile">
<!-- /mobile image -->
</td>
</tr>
</table>In the <head> of the email use the media queries before creating the CSS rules.
1 - this code hides the mobile image on the desktop version
.title-img-responsive.mobile {
display: none;
}2 - this code is hidding the desktop image on mobile version
.title-img-responsive {
display: none;
}3 - this code is displaying the mobile image on the mobile version
.title-img-responsive.mobile {
display: block !important;
}