2

We are trying to display an image only if the user is on a mobile device. Here's what we have so far:

div style="display: none; max-height: 0px; overflow: hidden; line-height: 0px;" class="show">
table cellpadding="0" cellspacing="0" border="0" width="100%" bgcolor="#ffffff" style="display: none;" class="showTable">
tr>
td align="center" width="100%">
a href="#" target="_blank" conversion="true" alias="Zone 1_Image_Get Free Passes">
img src="http://image.email.amctheatres.com/lib/fef51178716702/m/1/Fluffy_mobile_banner.jpg" alt="" width="300" height="294" border="0"/>
/a>
/td>
/tr>
/table>
/div>

  • is this part of an email template or visualforce pagE? If it is a VF page take a look a this help.salesforce.com/apex/…. User-agent can help identify if the user is accessing from a web browser or a mobile browser – Rao Jul 24 '14 at 16:25
  • This is part of an email template. – Realrx7 Jul 24 '14 at 16:52
0

What we did was this.....

  table[class="tbl"] .hide-for-small {
  display: none !important;
  font-size: 0 !important;
  line-height: 0 !important;
  height: 0 !important;
  width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
table[class="body"] .show-for-desktop {
  display: none !important;
}
table[class="body"] .show-for-small {
  display: inherit !important;
  height: auto !important;
  line-height: 0 !important;
}
td[class="mobile-hide"], td[class="mobile-hide"] img {
  display: none !important;
  font-size: 0 !important;
  line-height: 0 !important;
  height: 0 !important;
  width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
img[id="mobile-fill"] {
  display:block !important;
  width: 100% !important;
  height: auto !important;

}
div[id="hidden-image"] {
  display: block !important;
  width:100% !important;
  height: auto !important;
}
table[class="tbl"] .hide-for-desktop {
  display: inherit !important;
}



<div id="hidden-image" style="display: none; font-size: 0; height: 0; line-height: 0; margin:0; padding: 0; mso-hide: all;overflow:hidden;">
    <a href="LINK" target="_blank" style="color: #2ba6cb; text-decoration: none;">
       <img src="IMAGE_URL" style="border: none;" id="mobile-fill" width="0" height="0" border="0" />
     </a>
 </div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.