JN0
Serve a different image on mobile than desktop (mainly hero image)
Hi,
I have been doing some investigation about how you could serve a different image on desktop than a mobile.
It seems that this can be achieved with with a media query and the breakpoint is 325px? You would then have 2 JPEGS. 1 for mobile and 1 desktop. If the width is above 325 you get desktop, below you get mobile.
Does anyone have any example emails/code that they could share so I can see how this would look/work?
Thanks for all your help.
Jamie
I have noted these two threads but would welcome a complete email or section of code that I could analyse
https://litmus.com/blog/what-email-marketers-need-to-know-about-ios-11-and-the-new-iphones
https://litmus.com/blog/iphone-6-what-email-designers-and-marketers-need-to-know
Hi Jamie,
This is how I swap them:
https://litmus.com/builder/003b062
There might be better ways of doing it :)
Hope this helps!
Hi
Might be a simpler way but this works for me:
Styles:
.mobileOnly {
display: none !important;
width: 0% !important;
height: 0 !important;
max-height: 0 !important;
overflow: hidden !important;
}
@media only screen and (max-width:480px) {
.mobileOnly {
display: block !important;
width: 100% !important;
height: inherit !important;
max-height: inherit !important;
overflow: visible !important;
}
.desktopOnly {
display: none !important;
width: 0% !important;
height: 0 !important;
max-height: 0 !important;
overflow: hidden !important;
}
}
and HTML:
` <!-- desktop only -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="desktopOnly" bgcolor="#28A3C8">
<tr>
<td align="center" valign="top" style="padding:20px;">
<span style="font-family:'Neue Haas Grotesk Display Std', Helvetica,Arial,Sans-serif; font-size:14px; line-height:145%; color:#ffffff;">BLUE DESKTOP</span>
</td>
</tr>
</table>
<!-- /desktop only -->
<!-- Mobile only -->
<div class="mobileOnly" style="display:none; width:0; max-height:0;margin: 0px;padding:0; overflow:hidden;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#FF30DE" class="mobileOnly" style="display:none; width:0; max-height:0;margin: 0px;padding:0; overflow:hidden;">
<tr>
<td align="center" valign="top" style="padding:20px;">
<span style="font-family:'Neue Haas Grotesk Display Std', Helvetica,Arial,Sans-serif; font-size:14px; line-height:145%; color:#ffffff;">PINK MOBILE</span>
</td>
</tr>
</table>
</div>
<!-- /Mobile only --> `
hope this helps!