JJTargeting Desktop Outlook and NOT the Outlook App
Hello,
Often I have rows with images that are set to 1 pixel in order to have them expand to 100% on mobile devices using a media query. The problem with this is Outlook 2013 sets a default minimum height to table rows and I am left with a large amount of white space. I have been using conditional comments to 'hide' the code with the rows of 1 pixel images from Outlook. It has been working fine. But unfortunately the code is 'hidden' from the Outlook App as well. I need the 1 pixel images to expand to 100% on mobile devices and that inculdes those with the Outlook App. The code I am using to hide content from Outlook looks something like this:
*[class].MobileCreative {display:block; border:none; height:auto; line-height: 100%; outline:none; -ms-interpolation-mode: bicubic; width:100% !important; }
<!--------------- MOBILE CREATIVE ------------------------->
<!--[if !mso]><!-->
<td class="MobileCreative"><a href="#" target="_blank" title="" style="color:#1E1E1E; text-decoration:none;"><img src="image.jpg" width="1" height="1" border="0" class="HeroShot" style="display:block;" /></a></td>
<!--<![endif]-->
Does anyone know how I can target only desktop versions of Outlook 2007, 2013 & 2016 with a conditional comment but not the Outlook App on mobile devices?
Thanks,
James.
I have a feeling that Outlook 2016 and the Outlook App have the same version name:
Hi James,
I can't help you with targeting specific versions of Outlook and not others.
But rather than hiding the content, have you tried adding line-height and font-size attributes of 1px to the <td> containing the 1px image, so that Outlook 2013 doesn't increase the height of the td?
I apologize if I misunderstand your issue.
That seems to be a much simpler way to do it, thanks Ann.
I'm still interested in how conditional comments will work for the Outlook App. If anyone knows?
Again not a solution for targeting versions but - have you tried to assign mso-line-height-rule:exactly; in your TD's style?