Hi - looking for some advice on an issue we're having with our email rendering. I am aware of different renderings across different devices and clients, but we're having an anomaly issue where sometimes emails being delivered on desktops are shrinking to show a left aligned version, almost like the mobile version for the header graphic. Here is our current situation:
- Recently built out a master Marketo email template with about 10 different modules for our emails to be designed in Editor 2.0
- Test every email on Email on Acid and with samples directly to our team prior to sending an email.
- Email appears fine on all tests and in within Email on Acid.
- My company is running Office 365 with Microsoft Outlook 2016 - so we're all on the same client.
- Some executives are receiving the emails with the graphic and headline rendered as a cropped version to the left. It almost is as though some of the mobile formatting is being applied when they open on their desktop. It is happening both when they have images turned on and off.
- I've attached a few screengrabs of how the emails are supposed to look as well as the way they are receiving them with images on/off.
- It is only happening to the module that has a background image with text overlay, and it occurs if that module is in any location within the email.
I'm sure there is something in the code that can correct this, but I can't identify it since it's only happening on a few PCs with Office 365 with Microsoft Outlook 2016 and not universally on one client or device.
Here is the code for that module, and happy to share additional CSS if someone has ideas! Thank you!
<table class="deviceWidth mktoModule" id="banner-1bb67b845-ca21-4207-aff2-8adfd0cb0c05" mktoname="Banner 1" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse; margin:0 auto;" align="center" border="0" cellpadding="0" cellspacing="0" width="600">
<tbody>
<tr>
<td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;background-color:${Banner-BG-color1};background-image: url('${Banner-BG-image1}');background-size: cover; background-repeat: no-repeat;" background="${Banner-BG-image1}" bgcolor="${Banner-BG-color1}" valign="top">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;">
<v:fill type="frame" src="${Banner-BG-image1}" color="${Banner-BG-color1}" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<table class="deviceWidth" style="width: 500px; margin: 0 auto; text-align: center; border-collapse: collapse;" align="center" border="0" cellpadding="0" cellspacing="0" width="500">
<tbody>
<tr>
<td>
<div id="banner1-textbb67b845-ca21-4207-aff2-8adfd0cb0c05" class="mktoText" mktoname="Banner1 Text">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<!-- Extra space -->
<tbody>
<tr>
<td style="vertical-align: top; font-family: arial,helvetica,sans-serif; font-size: 36px; color: #8f8f8f; mso-line-height-rule: exactly; line-height: 40px; text-align: center;" valign="top">
<div>
<span style="color: #ffffff;"><strong><span style="font-size: 36px;"><br> <br><br> <br>Thank You for <span style="color: #f0ab00;">Attending! </span> <br></span></strong></span>
<span style="color: #ffffff;"><strong><span style="font-size: 36px;"> </span></strong></span>
</div> </td>
</tr>
<tr>
<td style="line-height: 1px; font-size: 1px; text-align: center;" height="10"><span style="color: #ffffff;"><strong> </strong></span></td>
</tr>
<tr>
<td style="vertical-align: top; font-family: arial,helvetica,sans-serif; font-size: 14px; color: #ffffff; mso-line-height-rule: exactly; line-height: 20px; text-align: center;" valign="top"><br></td>
</tr>
<!-- Extra space -->
</tbody>
</table>
</div> </td>
</tr>
<!--CTA button starts-->
<tr>
<td valign="top">
<div id="banner1-CTAbb67b845-ca21-4207-aff2-8adfd0cb0c05" class="mktoText" mktoname="Button CTA"></div> </td>
</tr>
<!--CTA button ends-->
<!-- Extra space -->
<tr>
<td class="phne_height" style="line-height: 1px; font-size: 1px;" height="50"> </td>
</tr>
</tbody>
</table>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]--> </td>
</tr>
</tbody>
</table>
.png)
Adchoices