Having a bit of trouble with Outlook PC not cooperating with my product images and names.
While other email clients show the product names below the images as intended, Outlook PC is causing the names to appear next to the images like this - Product names next to image
How can we fix this? Haha. I've provided the code for one of the products to illustrate what we are doing, but had to remove our site links for privacy reasons.
<!-- Product 1 -->
<td valign="top" align="center" class="product-image-wrapper" style="display: block; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-family: 'Century Gothic', 'MS Serif', 'New York', Tahoma, Arial, Helvetica, 'Open Sans'; width: 25%; padding-bottom: 20px; margin: 0;">
<a href="#" target="_blank" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; font-family: 'Century Gothic', 'MS Serif', 'New York', Tahoma, Arial, Helvetica, 'Open Sans'; text-align: center; line-height: 1.3; font-weight: 300; width: 100%; display: block; color: #53565a; text-decoration: none; margin: 0; font-size: 10px;">
<span style="font-family: 'Century Gothic', 'MS Serif', 'New York', Tahoma, Arial, Helvetica, 'Open Sans'; width: 146px; height: 146px; display: block; margin: 0 auto 5px; border: 1px solid #edeeee;">
<img src="http://placehold.it/146" alt="Place Holder Image" width="146" style="display: block; -ms-interpolation-mode: bicubic; height: auto !important; line-height: 100%; outline: none; text-decoration: none; width: 146px; margin: 0 auto; border: 0;" />
</span>
First Christmas Personalized Ornament
</a>
</td>
<!-- // End Product 1 -->
I'm thinking the text needs to be wrapped up in something, but I'm just not sure what or how. So any advice, tips, or help would be greatly appreciated.
Please let me know if you need anymore details from me on what the code looks like. With HTML emails being inlined, most all of our styling is right there, other than some mobile specific stuff.
Thank you in advance everyone!