Re: Marketo 2.0 Email Templates Issues with Banner Images

Robert_Stanley · ‎01-10-2019

Has anyone else seen a problem with Marketo 2.0 Email Templates, out-of-the-box, banner images getting cut off on the right and left borders (see image below)? We've tested most of them and they all look like this is in the Office Outlook 365 reading pane. Asking to see if anyone that's seen this figured out a fix, we asked our developer and they are having trouble figuring out what the issue is. Thanks!

Gerard_Donnell4 · ‎01-10-2019

Can you post the exact code for the email and we can debug it. Without the exact example you are working on, it will be hard to debug. I have not seen this issue. It seems to be only related to that banner module, almost like padding.

Robert_Stanley · ‎01-10-2019

Thanks Gerard, here is the code. Again haven't touched anything, out-of-the-box code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<!--[if mso]>

.primary-font {

font-family: Arial, sans-serif !important;

}

</style>

<![endif]-->

<!--[if mso]>

.secondary-font {

font-family: Arial, sans-serif !important;

}

</style>

<![endif]-->

/* CLIENT-SPECIFIC STYLES */

/* Outlook.com / Hotmail */

.ExternalClass {

width: 100%;

}

.ReadMsgBody,

.ExternalClass,

.ExternalClass p,

.ExternalClass span,

.ExternalClass font,

.ExternalClass td,

.ExternalClass div {

line-height: 100%;

}

/* OL07-10-13 "Read in browser link" */

#outlook a {

padding: 0;

}

/* Various OL fixes */

body{

-webkit-text-size-adjust:100%;

-ms-text-size-adjust:100%;

}

table {

mso-table-lspace:0pt;

mso-table-rspace:0pt;

}

img{

-ms-interpolation-mode: bicubic;

}

</style>

@media only screen and (max-width: 660px) {

/*starttablet*/

.stack-tablet {

overflow: visible !important;

float: none !important;

mso-hide: none !important;

display: block !important;

max-height: none !important;

}

img.responsive {

max-width: none !important;

}

.full,

.t100 {

width: 450px !important;

}

.full.unboxed,

.t100.unboxed {

width: 100% !important;

}

.t40 {

width: 180px !important;

}

.t60 {

width: 270px !important;

}

.m_free-image .full,

.m_free-text .full,

.m_separator .full,

.m_mkvideo .full {

width: 90% !important;

}

.m_free-image .full .t100,

.m_free-text .full .t100,

.m_separator .full .t100,

.m_mkvideo .full .t100 {

width: 100% !important;

}

.m_photoR .padder,

.m_photoL .padder {

width: 90% !important;

}

/*endtablet*/

}

</style>

@media only screen and (max-width: 360px) {

/*startmobile*/

.stack-phone {

overflow: visible !important;

float: none !important;

mso-hide: none !important;

display: block !important;

max-height: none !important;

}

.full,

.p100 {

width: 280px !important;

}

.full.unboxed,

.p100.unboxed {

width: 100% !important;

}

/*endmobile*/

}

</style>

<style>

/*startcommon*/

@media only screen and (max-width: 660px) {

table.m_boxing{

width: 100% !important;

}

/*endcommon*/

</style>

</head>

<tbody>

<tr>

<tbody>

<tr>

<tbody>

<tr>

<tbody>

<tr>

</tr>

<tr>

<tbody>

<tr>

<strong>Today Only:</strong> Click here and get your ticket for the event

</div></td>

</tr>

</tbody>

</table> </td>

</tr>

<tr>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table>

<tbody>

<tr>

<tbody>

<tr>

</tr>

<tr>

<tbody>

</div> </td>

</tr>

</tbody>

</table>

<tbody>

<tr>

</tr>

<tr>

<tbody>

<tr>

</div></td>

</div></td>

</div></td>

</div></td>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table> </td>

</tr>

<tr>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table>

<tbody>

<tr>

<!--[if gte mso 9]>

<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:660px;height:226px">

<v:fill type="frame" src="${heroBackgroundImage}" color="${heroBackgroundColor}" />

<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">

<![endif]-->

<tbody>

<tr>

</tr>

<tr>

<tbody>

<tr>

</tr>

<tr>

GET READY!

</div> </td>

</tr>

<tr>

March the 18

</div> </td>

</tr>

<tr>

</tr>

<tr>

<tbody>

<tr>

<td style="border-collapse: collapse; word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;" align="left" bgcolor="${heroButtonBackgroundColor}"><a class="primary-font button" href="${heroLink}" target="_blank" style="border-left-style: solid;font-size: 14px;text-decoration: none;padding-top: 0.8em;padding-bottom: 0.8em;padding-left: 1.3em;padding-right: 1.3em;border-top-width:${heroBorderSize};border-right-width:${heroBorderSize};border-bottom-width:${heroBorderSize};border-left-width:${heroBorderSize};border-top-style: solid;border-right-style: solid;border-bottom-style: solid;color:

#ffffff;border-top-color:${heroBorderColor};border-right-color:${heroBorderColor};border-bottom-color:${heroBorderColor};border-left-color:${heroBorderColor};display: inline-block;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;-moz-background-clip: padding;-webkit-background-clip: padding-box;background-clip: padding-box;font-weight: 700;font-family:'Varela Round', Arial,

sans-serif;background-color:${heroButtonBackgroundColor};">

${heroLinkText}

</a></td>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table> </td>

</tr>

<tr>

</tr>

</tbody>

</table>

<!--[if gte mso 9]>

</v:textbox>

</v:rect>

<![endif]-->

</center></td>

</tr>

</tbody>

</table>

<tbody>

<tr>

<tbody>

<tr>

<tbody>

<tr>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table>

<tbody>

<tr>

<tbody>

<tr>

<tbody>

<tr>

</div> </td>

</tr>

</tbody>

</table>

<tbody>

<tr>

</tr>

<tr>

<tbody>

<tr>

<tbody>

<tr>

</div> </td>

8:00

</div> </td>

</tr>

</tbody>

</table> </td>

</tr>

<tr>

</tr>

<tr>

Grand Opening

</div> </td>

</tr>

<tr>

</tr>

<tr>

Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur.

</div> </td>

</tr>

<tr>

</tr>

<tr>

<tbody>

<tr>

<td style="border-collapse: collapse; word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;" align="left" bgcolor="${photoLButtonBackgroundColor}"><a class="primary-font button" href="${photoLLink}" target="_blank" style="border-left-style: solid;font-size: 14px;text-decoration: none;padding-top: 0.8em;padding-bottom: 0.8em;padding-left: 1.3em;padding-right: 1.3em;border-top-width:${photoLBorderSize};border-right-width:${photoLBorderSize};border-bottom-width:${photoLBorderSize};border-left-width:${photoLBorderSize};border-top-style: solid;border-right-style: solid;border-bottom-style:

solid;color: #707be4;border-top-color:${photoLBorderColor};border-right-color:${photoLBorderColor};border-bottom-color:${photoLBorderColor};border-left-color:${photoLBorderColor};display: inline-block;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;-moz-background-clip: padding;-webkit-background-clip: padding-box;background-clip: padding-box;font-weight:

700;font-family:'Varela Round', Arial, sans-serif;background-color:${photoLButtonBackgroundColor};">

${photoLLinkText}

</a></td>

</tr>

</tbody>

</table> </td>

</tr>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table>

<tbody>

<tr>

<tbody>

<tr>

<tbody>

<tr>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table>

<tbody>

<tr>

<tbody>

<tr>

<tbody>

<tr>

</div> </td>

</tr>

</tbody>

</table>

<tbody>

<tr>

</tr>

<tr>

<tbody>

<tr>

<tbody>

<tr>

</div> </td>

10:00

</div> </td>

</tr>

</tbody>

</table> </td>

</tr>

<tr>

</tr>

<tr>

First Speech

</div> </td>

</tr>

<tr>

</tr>

<tr>

Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur.

</div> </td>

</tr>

<tr>

</tr>

<tr>

<tbody>

<tr>

<td style="border-collapse: collapse; word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;" align="left" bgcolor="${photoRButtonBackgroundColor}"><a class="primary-font button" href="${photoRLink}" target="_blank" style="border-left-style: solid;font-size: 14px;text-decoration: none;padding-top: 0.8em;padding-bottom: 0.8em;padding-left: 1.3em;padding-right: 1.3em;border-top-width:${photoRBorderSize};border-right-width:${photoRBorderSize};border-bottom-width:${photoRBorderSize};border-left-width:${photoRBorderSize};border-top-style: solid;border-right-style: solid;border-bottom-style:

solid;color: #707be4;border-top-color:${photoRBorderColor};border-right-color:${photoRBorderColor};border-bottom-color:${photoRBorderColor};border-left-color:${photoRBorderColor};display: inline-block;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;-moz-background-clip: padding;-webkit-background-clip: padding-box;background-clip: padding-box;font-weight:

700;font-family:'Varela Round', Arial, sans-serif;background-color:${photoRButtonBackgroundColor};">

${photoRLinkText}

</a></td>

</tr>

</tbody>

</table> </td>

</tr>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table>

<tbody>

<tr>

<tbody>

<tr>

<tbody>

<tr>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table>

<tbody>

<tr>

<tbody>

<tr>

<tbody>

<tr>

</div> </td>

</tr>

</tbody>

</table>

<tbody>

<tr>

</tr>

<tr>

<tbody>

<tr>

<tbody>

<tr>

</div> </td>

12:00

</div> </td>

</tr>

</tbody>

</table> </td>

</tr>

<tr>

</tr>

<tr>

Startup Pitch

</div> </td>

</tr>

<tr>

</tr>

<tr>

Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur.

</div> </td>

</tr>

<tr>

</tr>

<tr>

<tbody>

<tr>

<td style="border-collapse: collapse; word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;" align="left" bgcolor="${photoLButtonBackgroundColor2}"><a class="primary-font button" href="${photoLLink2}" target="_blank" style="border-left-style: solid;font-size: 14px;text-decoration: none;padding-top: 0.8em;padding-bottom: 0.8em;padding-left: 1.3em;padding-right: 1.3em;border-top-width:${photoLBorderSize2};border-right-width:${photoLBorderSize2};border-bottom-width:${photoLBorderSize2};border-left-width:${photoLBorderSize2};border-top-style: solid;border-right-style:

solid;border-bottom-style: solid;color: #707be4;border-top-color:${photoLBorderColor2};border-right-color:${photoLBorderColor2};border-bottom-color:${photoLBorderColor2};border-left-color:${photoLBorderColor2};display: inline-block;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;-moz-background-clip: padding;-webkit-background-clip: padding-box;background-clip:

padding-box;font-weight: 700;font-family:'Varela Round', Arial, sans-serif;background-color:${photoLButtonBackgroundColor2};">

${photoLLinkText2}

</a></td>

</tr>

</tbody>

</table> </td>

</tr>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table>

<tbody>

<tr>

<tbody>

<tr>

<tbody>

<tr>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table>

<tbody>

<tr>

<tbody>

<tr>

<tbody>

<tr>

</div> </td>

</tr>

</tbody>

</table>

<tbody>

<tr>

</tr>

<tr>

<tbody>

<tr>

<tbody>

<tr>

</div> </td>

13:00

</div> </td>

</tr>

</tbody>

</table> </td>

</tr>

<tr>

</tr>

<tr>

Lunch Break

</div> </td>

</tr>

<tr>

</tr>

<tr>

Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur.

</div> </td>

</tr>

<tr>

</tr>

<tr>

<tbody>

<tr>

<td style="border-collapse: collapse; word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;" align="left" bgcolor="${photoRButtonBackgroundColor2}"><a class="primary-font button" href="${photoRLink2}" target="_blank" style="border-left-style: solid;font-size: 14px;text-decoration: none;padding-top: 0.8em;padding-bottom: 0.8em;padding-left: 1.3em;padding-right: 1.3em;border-top-width:${photoRBorderSize2};border-right-width:${photoRBorderSize2};border-bottom-width:${photoRBorderSize2};border-left-width:${photoRBorderSize2};border-top-style: solid;border-right-style:

solid;border-bottom-style: solid;color: #707be4;border-top-color:${photoRBorderColor2};border-right-color:${photoRBorderColor2};border-bottom-color:${photoRBorderColor2};border-left-color:${photoRBorderColor2};display: inline-block;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;-moz-background-clip: padding;-webkit-background-clip: padding-box;background-clip:

padding-box;font-weight: 700;font-family:'Varela Round', Arial, sans-serif;background-color:${photoRButtonBackgroundColor2};">

${photoRLinkText2}

</a></td>

</tr>

</tbody>

</table> </td>

</tr>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table>

<tbody>

<tr>

<tbody>

<tr>

<tbody>

<tr>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table>

<tbody>

<tr>

<tbody>

<tr>

<tbody>

<tr>

</div> </td>

</tr>

</tbody>

</table>

<tbody>

<tr>

</tr>

<tr>

<tbody>

<tr>

<tbody>

<tr>

</div> </td>

15:00

</div> </td>

</tr>

</tbody>

</table> </td>

</tr>

<tr>

</tr>

<tr>

Managing Director Speech

</div> </td>

</tr>

<tr>

</tr>

<tr>

Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur.

</div> </td>

</tr>

<tr>

</tr>

<tr>

<tbody>

<tr>

<td style="border-collapse: collapse; word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;" align="left" bgcolor="${photoLButtonBackgroundColor3}"><a class="primary-font button" href="${photoLLink3}" target="_blank" style="border-left-style: solid;font-size: 14px;text-decoration: none;padding-top: 0.8em;padding-bottom: 0.8em;padding-left: 1.3em;padding-right: 1.3em;border-top-width:${photoLBorderSize3};border-right-width:${photoLBorderSize3};border-bottom-width:${photoLBorderSize3};border-left-width:${photoLBorderSize3};border-top-style: solid;border-right-style:

solid;border-bottom-style: solid;color: #707be4;border-top-color:${photoLBorderColor3};border-right-color:${photoLBorderColor3};border-bottom-color:${photoLBorderColor3};border-left-color:${photoLBorderColor3};display: inline-block;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;-moz-background-clip: padding;-webkit-background-clip: padding-box;background-clip:

padding-box;font-weight: 700;font-family:'Varela Round', Arial, sans-serif;background-color:${photoLButtonBackgroundColor3};">

${photoLLinkText3}

</a></td>

</tr>

</tbody>

</table> </td>

</tr>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table>

<tbody>

<tr>

<tbody>

<tr>

<tbody>

<tr>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table>

<tbody>

<tr>

<tbody>

<tr>

<tbody>

<tr>

</div> </td>

</tr>

</tbody>

</table>

<tbody>

<tr>

</tr>

<tr>

<tbody>

<tr>

<tbody>

<tr>

</div> </td>

16:00

</div> </td>

</tr>

</tbody>

</table> </td>

</tr>

<tr>

</tr>

<tr>

Coffee Break

</div> </td>

</tr>

<tr>

</tr>

<tr>

Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur.

</div> </td>

</tr>

<tr>

</tr>

<tr>

<tbody>

<tr>

<td style="border-collapse: collapse; word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;" align="left" bgcolor="${photoRButtonBackgroundColor3}"><a class="primary-font button" href="${photoRLink3}" target="_blank" style="border-left-style: solid;font-size: 14px;text-decoration: none;padding-top: 0.8em;padding-bottom: 0.8em;padding-left: 1.3em;padding-right: 1.3em;border-top-width:${photoRBorderSize3};border-right-width:${photoRBorderSize3};border-bottom-width:${photoRBorderSize3};border-left-width:${photoRBorderSize3};border-top-style: solid;border-right-style:

solid;border-bottom-style: solid;color: #707be4;border-top-color:${photoRBorderColor3};border-right-color:${photoRBorderColor3};border-bottom-color:${photoRBorderColor3};border-left-color:${photoRBorderColor3};display: inline-block;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;-moz-background-clip: padding;-webkit-background-clip: padding-box;background-clip:

padding-box;font-weight: 700;font-family:'Varela Round', Arial, sans-serif;background-color:${photoRButtonBackgroundColor3};">

${photoRLinkText3}

</a></td>

</tr>

</tbody>

</table> </td>

</tr>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table>

<tbody>

<tr>

<tbody>

<tr>

<tbody>

<tr>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table>

<tbody>

<tr>

<tbody>

<tr>

</tr>

<tr>

<tbody>

<tr>

</tr>

</tbody>

</table> </td>

</tr>

<tr>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table>

<tbody>

<tr>

<tbody>

<tr>

</tr>

<tr>

<tbody>

<tr>

</center> </td>

</tr>

</tbody>

</table> </td>

</tr>

<tr>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table>

<tbody>

<tr>

<tbody>

<tr>

<tbody>

<tr>

</div> </td>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table>

<tbody>

<tr>

<tbody>

<tr>

</tr>

<tr>

<tbody>

<tr>

Location Details

</div></td>

</tr>

<tr>

</tr>

<tr>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</div></td>

</tr>

<tr>

</tr>

</tbody>

</table> </td>

</tr>

<tr>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table>

<tbody>

<tr>

<tbody>

<tr>

</tr>

<tr>

<tbody>

<tr>

<tbody>

<tr>

</tr>

<tr>

<tbody>

<tr>

</div></td>

+000 000 0000

</div></td>

</tr>

</tr>

</tbody>

</table>

<tbody>

<tr>

</div></td>

<td class="secondary-font text" style="word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;font-family:'Raleway', Arial, sans-serif;font-size: 13px;color: #ffffff;line-height: 18px;"> <a href="${footerLink}" style="color: #ffffff; text-decoration: none;">${footerLinkText}</a></td>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table> </td>

</tr>

</tr>

</tbody>

</table>

<tbody>

<tr>

<tbody>

<tr>

</div></td>

</div></td>

</div></td>

</div></td>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table> </td>

</tr>

<tr>

</tr>

</tbody>

</table>

<tbody>

<tr>

<tbody>

<tr>

This email was sent to mail@mail.com, because your email preferences are set to receive our updates.

<br />To stop receiving this emails

</div></span><a href="${unsubLink}" style="color: #ffffff;font-family:'Raleway', Arial, sans-serif;" class="secondary-font">unsubscribe</a></td>

</tr>

<tr>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table></td>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table>

</body>

</html>

Gerard_Donnell4 · ‎01-10-2019

what browser are you using? Does your company role out browser updates internally? See my screenshot from Chrome on a Mac, it looks perfect. Do you have a Litmus account? If not sign up for a 7 day free trial, then send a sample of the email to Litmus and see what its showing in all the different browsers and email clients.

Grace_Brebner3 · ‎01-10-2019

Seconding Gerard's point; Litmus is indispensable for this sort of stuff (esp since the update which allows you to view client specific processed html - though it's not perfect).

Robert_Stanley · ‎01-11-2019

Thanks Gerard, seeing the issue only in the reading pane in Outlook for Microsoft 365, when you double click on the email it formats nicely. I'll have to sign up for Litmus. Appreciate the response.

Dave_Roberts · ‎01-10-2019

It looks like the background size for Outlook is set to 660px and the background size for your content container is set to 600px. This would amount to 30px on a side getting clipped (and it looks like more than 30 to a side in the screenshot you posted).

You might try shrinking the Outlook code (660px) to 600px or increasing the table atop that from 600px to 660px.

I've seen this type of clipping before using this method to include background images in emails. In most of those cases, there was an issue with the way the template was coded so that some of the properties don't match up (like the width in this case).

Robert_Stanley · ‎01-11-2019

Thanks Dave, tried this but still didn't work. Pretty surprised Marketo's out-of-the-box templates have these sorts of issues.