Re: Outlook 2016 Shrinking Hero Images

CMarketing · ‎08-24-2020

Hello all,
when creating an HTML email using one of the the default Marketo Templates I am encountering an issue where the hero image is shrinking in the viewer. Attached is a screenshot of what the issue looks like.

<table id="hero" 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;" align="center" border="0" cellpadding="0" cellspacing="0" width="100%" class="mktoModule m_hero" mktoname="Hero"> 
                      <tbody> 
                        <tr> 
                          <td class="background" style="-webkit-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;font-family: 'Montserrat', Arial, sans-serif;-ms-text-size-adjust: 100%;vertical-align: middle;width: 700px; height: 353px;background-repeat: no-repeat;background-position: center 
center;background:${heroBackgroundImage};background-color:${heroBackgroundColor};padding-top: 0;padding-right: 0;padding-bottom: 0;padding-left: 0;background-image:${heroBackgroundImage};border-collapse: collapse;" height="353" background="${heroBackgroundImage}" bgcolor="${heroBackgroundColor}" valign="top" width="700"> 
                            <center> 
                              <!--[if gte mso 9]>
                    <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:700px;height:353px" width="700">
					<v:fill type="frame" src="${heroBackgroundImage}" color="${heroBackgroundColor}" style="width:700px;height:353px" width="700" />
					<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
					<![endif]--> 
                              <table class="table600" 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-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto;" align="center" border="0" cellpadding="0" cellspacing="0" width="600"> 
                                <tbody> 
                                  <tr> 
                                    <td class="" 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; font-family: 'Montserrat', Arial, sans-serif; border-collapse: collapse;" height="86">&nbsp;</td> 
                                  </tr> 
                                  <tr> 
                                    <td class="primary-font title" style="hyphens: none;-webkit-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;-ms-text-size-adjust: 100%;font-family:'Montserrat', Arial, sans-serif;font-size: 60px;line-height: 90%;color: #32ad84;text-align: left;border-collapse: collapse;"> 
                                      <div class="mktoText" mktoname="Title" id="title">
                                        SKY RACE
                                      </div> </td> 
                                  </tr> 
                                  <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; font-family: 'Montserrat', Arial, sans-serif; border-collapse: collapse;" height="10">&nbsp;</td> 
                                  </tr> 
                                  <tr> 
                                    <td class="primary-font subtitle" style="hyphens: none;-webkit-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;-ms-text-size-adjust: 100%;font-family:'Montserrat', Arial, sans-serif;text-align: left;color: black;font-weight: bold;font-size: 17px;letter-spacing: 1px;border-collapse: collapse;"> 
                                      <div class="mktoText" mktoname="Subtitle" id="subtitle">
                                        LOREM IPSUM DOLOR
                                      </div> </td> 
                                  </tr> 
                                  <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; font-family: 'Montserrat', Arial, sans-serif; border-collapse: collapse;" height="30">&nbsp;</td> 
                                  </tr> 
                                  <tr> 
                                    <td class="cta" 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; font-family: 'Montserrat', Arial, sans-serif; border-collapse: collapse;"> 
                                      <center> 
                                        <table 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;" align="left" border="0" cellpadding="0" cellspacing="0"> 
                                          <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; font-family: 'Montserrat', Arial, sans-serif; border-collapse: collapse;" align="center" bgcolor="${heroButtonBackgroundColor}"> <a href="${heroLink}" target="_blank" class="primary-font button" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;display: inline-block;font-size: 14px;font-family:'Montserrat', Arial, sans-serif;color: white;padding-top: 12px;padding-right: 18px;padding-bottom: 12px;padding-left: 18px;border-top-width:${heroBorderSize};border-right-width:${heroBorderSize};letter-spacing: 2px;border-left-width:${heroBorderSize};border-top-style: 
solid;border-right-style: solid;border-bottom-style: solid;border-left-style: solid;border-bottom-width:${heroBorderSize};text-decoration: none;border-top-color:${heroBorderColor};border-right-color:${heroBorderColor};border-bottom-color:${heroBorderColor};border-left-color:${heroBorderColor};background-color:${heroButtonBackgroundColor};">${heroLinkText}</a> </td> 
                                            </tr> 
                                          </tbody> 
                                        </table> 
                                      </center> </td> 
                                  </tr> 
                                  <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; font-family: 'Montserrat', Arial, sans-serif; border-collapse: collapse;" height="86">&nbsp;</td> 
                                  </tr> 
                                </tbody> 
                              </table> 
                              <!--[if gte mso 9]>
                    </v:textbox>
                    </v:rect>
                    <![endif]--> 
                            </center></td> 
                        </tr> 
                      </tbody> 
                    </table>

am using 2016 Outlook.

Dave_Roberts · ‎08-25-2020

This could have something to do with the container size here - it looks like you've got a 700px wide container for the bg image and then a centered 600px container in the middle of that. When I check out the screenshot you attached, the email is much wider than 700px (looks about 1000px edge-to-edge in Photoshop on my end) and the image piece is also wider than 700px.

This might have something to do with some of the classes you're using in the head - looks like there's a "table600" class in there which doesn't agree with the 700px width on the container in the Hero banner section.

You might take a pass and try to get all of your widths to be consistent - choose 600 or 700 and try to align all the items with that width instead of mixing them. Since it looks like you're coming out a little short on the width of the banner image, I'd try bumping the nested table that's 600px up to 700px first to see if that works out. The Outlook code you've got in there for bg-images looks right to me, normally when something like this happens there's a difference b/t the Outlook VML and the HTML for the rest of the email universe.

It might also be that the email template is setup to display at 640px based on the note on the image, you might want to check the image you're using there and make sure that it's big enough (or not too big) to fill the space EXACTLY.

If none of that works, it might be helpful to post the rest of the HTML from your template here for review, sometimes it's helpful to see how the variables translate and what classes, etc are tucked into the CSS in the head.

Let me know if changing the width of those elements makes any difference to the render, I'd image you'll be able to see some kind of difference by fiddling around with the fixed widths and sending yourself a test email to compare.

Thanks,

Dave

CMarketing · ‎08-25-2020

I am going to go ahead and post the rest here, its one of the default templates and I havent changed anything, in the meantime I will check out the container size

-- Thanks for the help!!

<table id="hero" 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;" align="center" border="0" cellpadding="0" cellspacing="0" width="100%" class="mktoModule m_hero" mktoname="Hero"> 
                      <tbody> 
                        <tr> 
                          <td class="background" style="-webkit-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;font-family: 'Montserrat', Arial, sans-serif;-ms-text-size-adjust: 100%;vertical-align: middle;width: 700px; height: 353px;background-repeat: no-repeat;background-position: center 
center;background:${heroBackgroundImage};background-color:${heroBackgroundColor};padding-top: 0;padding-right: 0;padding-bottom: 0;padding-left: 0;background-image:${heroBackgroundImage};border-collapse: collapse;" height="353" background="${heroBackgroundImage}" bgcolor="${heroBackgroundColor}" valign="top" width="700"> 
                            <center> 
                              <!--[if gte mso 9]>
                    <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:700px;height:353px" width="700">
					<v:fill type="frame" src="${heroBackgroundImage}" color="${heroBackgroundColor}" style="width:700px;height:353px" width="700" />
					<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
					<![endif]--> 
                              <table class="table600" 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-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto;" align="center" border="0" cellpadding="0" cellspacing="0" width="600"> 
                                <tbody> 
                                  <tr> 
                                    <td class="" 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; font-family: 'Montserrat', Arial, sans-serif; border-collapse: collapse;" height="86">&nbsp;</td> 
                                  </tr> 
                                  <tr> 
                                    <td class="primary-font title" style="hyphens: none;-webkit-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;-ms-text-size-adjust: 100%;font-family:'Montserrat', Arial, sans-serif;font-size: 60px;line-height: 90%;color: #32ad84;text-align: left;border-collapse: collapse;"> 
                                      <div class="mktoText" mktoname="Title" id="title">
                                        SKY RACE
                                      </div> </td> 
                                  </tr> 
                                  <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; font-family: 'Montserrat', Arial, sans-serif; border-collapse: collapse;" height="10">&nbsp;</td> 
                                  </tr> 
                                  <tr> 
                                    <td class="primary-font subtitle" style="hyphens: none;-webkit-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;-ms-text-size-adjust: 100%;font-family:'Montserrat', Arial, sans-serif;text-align: left;color: black;font-weight: bold;font-size: 17px;letter-spacing: 1px;border-collapse: collapse;"> 
                                      <div class="mktoText" mktoname="Subtitle" id="subtitle">
                                        LOREM IPSUM DOLOR
                                      </div> </td> 
                                  </tr> 
                                  <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; font-family: 'Montserrat', Arial, sans-serif; border-collapse: collapse;" height="30">&nbsp;</td> 
                                  </tr> 
                                  <tr> 
                                    <td class="cta" 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; font-family: 'Montserrat', Arial, sans-serif; border-collapse: collapse;"> 
                                      <center> 
                                        <table 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;" align="left" border="0" cellpadding="0" cellspacing="0"> 
                                          <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; font-family: 'Montserrat', Arial, sans-serif; border-collapse: collapse;" align="center" bgcolor="${heroButtonBackgroundColor}"> <a href="${heroLink}" target="_blank" class="primary-font button" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;display: inline-block;font-size: 14px;font-family:'Montserrat', Arial, sans-serif;color: white;padding-top: 12px;padding-right: 18px;padding-bottom: 12px;padding-left: 18px;border-top-width:${heroBorderSize};border-right-width:${heroBorderSize};letter-spacing: 2px;border-left-width:${heroBorderSize};border-top-style: 
solid;border-right-style: solid;border-bottom-style: solid;border-left-style: solid;border-bottom-width:${heroBorderSize};text-decoration: none;border-top-color:${heroBorderColor};border-right-color:${heroBorderColor};border-bottom-color:${heroBorderColor};border-left-color:${heroBorderColor};background-color:${heroButtonBackgroundColor};">${heroLinkText}</a> </td> 
                                            </tr> 
                                          </tbody> 
                                        </table> 
                                      </center> </td> 
                                  </tr> 
                                  <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; font-family: 'Montserrat', Arial, sans-serif; border-collapse: collapse;" height="86">&nbsp;</td> 
                                  </tr> 
                                </tbody> 
                              </table> 
                              <!--[if gte mso 9]>
                    </v:textbox>
                    </v:rect>
                    <![endif]--> 
                            </center></td> 
                        </tr> 
                      </tbody> 
                    </table>