Snow Bunny Template Mobile Phone Rendering

Anonymous · ‎07-21-2017

Hi we put in a jpeg that has the Marketo recommended specifications into the Snow Bunny template Hero Section. But on the mobile rendering it's cutting out the person in the photo. Any suggestions on how to fix this problem? Will Marketo let you upload one photo for desktop and a separate one for mobile?

Thanks for your help!

Anonymous · ‎07-21-2017

Josh Hill

Any thoughts on this? Or any developers you know to direct us to?

Frank_Breen2 · ‎07-21-2017

Please share the code so we can debug and give a solution.

Anonymous · ‎07-21-2017

Brittany Brown can you past the code here

Anonymous · ‎07-21-2017

<!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]-->

<style>

/*startcommon*/

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

table.m_boxing{

width: 100% !important;

}

/*endcommon*/

</style>

/* CLIENT-SPECIFIC STYLES */

#outlook a {

padding: 0;

}

/* Force Outlook to provide a "view in browser" message */

.ReadMsgBody {

width: 100%;

}

.ExternalClass {

width: 100%;

}

/* Force Hotmail to display emails at full width */

.ExternalClass,

.ExternalClass p,

.ExternalClass span,

.ExternalClass font,

.ExternalClass td,

.ExternalClass div {

line-height: 100%;

}

/* Force Hotmail to display normal line spacing */

/* iOS BLUE LINKS */

.appleBody a {

color: .m_000;

text-decoration: none;

}

.appleFooter a {

color: .m_000;

text-decoration: none;

}

@-ms-viewport {

width: device-width;

}

</style>

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

/*starttablet*/

body {

width: auto !important;

}

table.table600{

width: 450px !important;

}

table.table-inner{

width: 86% !important;

}

table.table1-2{

width: 47% !important;

clear: both;

}

table.table1-3{

width: 29.4% !important;

}

table.table1-4{

width: 100% !important;

text-align: left !important;

}

table.table2-3{

width: 64% !important;

text-align: center !important;

}

table.table3-3{

width: 100% !important;

text-align: center !important;

clear: both;

}

table.footer-logo{

width: 10% !important;

text-align: right !important;

}

td.outer{

min-width: 0 !important;

}

td.stack{

padding-bottom: 40px !important;

}

.stack-tablet {

padding-bottom: 20px !important;

overflow: visible !important;

float: none !important;

mso-hide: none !important;

display: block !important;

}

img.mobile-img{

width: 100% !important;

height: auto !important;

}

td.center-tablet{

text-align: center !important;

}

td.hide-tablet{

display: none !important;

}

table.footer-column{

width: 47% !important;

text-align: left !important;

}

.m_header td {

text-align: center !important;

}

.m_hero .background {

background-size: cover !important;

}

.m_overlay-image .background {

background-size: cover !important;

}

.mktoVideoThumbnail{

width: 100% !important;

height: auto!important;

max-height:inherit!important;

min-height:inherit!important;

}

.m_menu {

padding-top: 10px !important;

padding-right: 0 !important;

padding-bottom: 10px !important;

padding-left: 0 !important;

}

.m_menu p {

display: block !important;

padding-top: 0 !important;

padding-right: 0 !important;

padding-bottom: 10px !important;

padding-left: 0 !important;

}

.m_horizontal img {

display: inline-block;

margin-top: 0;

margin-right: auto;

margin-bottom: 30px;

margin-left: auto;

}

.m_article .table1-2 {

width: 100% !important;

clear: both;

}

.m_article .cta table {

margin-top: 0 !important;

margin-right: auto !important;

margin-bottom: 0 !important;

margin-left: auto !important;

}

.m_overlay-image .box {

float: none !important;

width: 220px;

margin-top: 0 !important;

margin-right: auto !important;

margin-bottom: 0 !important;

margin-left: auto !important;

}

.m_contacts .table1-2 {

width: 100% !important;

clear: both;

text-align: center !important;

}

.m_free-image img {

width: 450px !important;

height: auto;

}

.m_team .spacer,

.m_three-articles .spacer {

width: 28px !important;

}

.m_features .spacer {

width: 26px;

}

/*endtablet*/

}

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

/*startmobile*/

body {

width: auto !important;

}

table.table600{

width: 290px !important;

}

table.table-inner{

width: 80% !important;

float: none !important;

}

table.table1-2{

width: 100% !important;

clear: both;

}

table.table1-3{

width: 100% !important;

clear: both;

}

table.table1-4{

width: 100% !important;

text-align: center !important;

}

table.table2-3{

width: 100% !important;

text-align: center !important;

}

table.table3-3{

width: 100% !important;

text-align: center !important;

clear: both;

}

table.footer-logo{

width: 60% !important;

text-align: center !important;

}

td.outer{

min-width: 0 !important;

}

td.td3-1{

width: 60% !important;

text-align: center !important;

}

.stack-smartphone {

padding-bottom: 20px !important;

overflow: visible !important;

float: none !important;

display: block !important;

mso-hide: none !important;

}

td.center-smartphone{

text-align: center !important;

}

img.mobile-img{

width: 100% !important;

}

td.center-tablet{

text-align: center !important;

}

td.hide-smartphone{

display: none !important;

}

table.footer-column{

width: 100% !important;

text-align: center !important;

}

.m_free-image img {

width: 290px !important;

height: auto;

}

.m_horizontal img {

margin-top: 0 !important;

margin-right: auto !important;

margin-bottom: 0 !important;

margin-left: auto !important;

}

.m_hero .background {

background-size: cover !important;

}

.m_overlay-image .background {

background-size: cover !important;

}

/*endmobile*/

}

</style>

</head>

</div>

<tbody>

<tr>

<tbody>

<tr>

<tbody>

<tr>

<tbody>

<tr>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table>

<tbody>

<tr>

<tbody>

<tr>

</tr>

<tr>

<tbody>

<tr>

</div> </td>

</tr>

</tbody>

</table>

<tbody>

<tr>

<span style="font-family: Helvetica, sans-serif; color: #ffffff; font-size: 15px; font-weight: normal; line-height: 16px; text-align: right; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; valign: middle;"><strong><span style="color: #f99507;">CALL</span> 800-462-2848</strong><br /><a href="https://www.backroads.com/find/destination" target="_blank" style="color: #ffffff; text-decoration: none;">Find a Trip</a> | <a href="mailto:#" target="_blank" style="color: #ffffff; text-decoration: none;">Email Us</a></span>

</div></td>

</tr>

</tbody>

</table>

</center> </td>

</tr>

<tr>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table>

<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: Arial, Helvetica sans-serif;-ms-text-size-adjust: 100%;vertical-align: middle;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">

<!--[if gte mso 9]>

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

<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>

SKY RACE

</div> </td>

</tr>

<tr>

</tr>

<tr>

LOREM IPSUM DOLOR

</div> </td>

</tr>

<tr>

</tr>

<tr>

<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: Arial, Helvetica 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:Arial, Helvetica 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>

</tr>

</tbody>

</table>

<!--[if gte mso 9]>

</v:textbox>

</v:rect>

<![endif]-->

</center></td>

</tr>

</tbody>

</table>

<tbody>

<tr>

<tbody>

<tr>

</tr>

<tr>

<tbody>

<tr>

<td class="bordered" 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: Arial, Helvetica sans-serif;-ms-text-size-adjust:

100%;background-color:${threeArticlesBackgroundColor2};border-top-width:${threeArticlesBorderSize};border-left-color:${threeArticlesBorderColor};border-bottom-width:${threeArticlesBorderSize};border-left-width:${threeArticlesBorderSize};border-top-style: solid;border-right-style: solid;border-bottom-style: solid;border-left-style:

solid;border-top-color:${threeArticlesBorderColor};border-right-color:${threeArticlesBorderColor};border-bottom-color:${threeArticlesBorderColor};border-right-width:${threeArticlesBorderSize};border-collapse: collapse;" bgcolor="${threeArticlesBackgroundColor2}">

<tbody>

<tr>

</div>

</center></td>

</tr>

<tr>

</tr>

<tr>

10.23.2016

</div> </td>

</tr>

<tr>

</tr>

<tr>

LOREM IPSUM DOLOR SIT AMET

</div> </td>

</tr>

<tr>

</tr>

<tr>

<td class="secondary-font text" 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;-ms-text-size-adjust: 100%;padding-left: 20px;font-family:'Questrial', Arial, sans-serif;color: #7e878b;font-size: 14px;line-height: 150%;padding-top: 0;padding-right: 20px;padding-bottom:

0;border-collapse: collapse;">

Lorem ipsum dolor sitan consectetur adipiscing ultrices pellentesque liti sett lacinia eros.

</div> </td>

</tr>

<tr>

</tr>

<tr>

<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: Arial, Helvetica sans-serif; border-collapse: collapse;" align="center" bgcolor="${threeArticlesButtonBackgroundColor}"> <a href="${threeArticlesLink}" target="_blank" class="primary-font button" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;display: inline-block;letter-spacing: 2px;text-decoration: none;border-top-style: solid;padding-top: 5px;padding-right: 15px;padding-bottom: 5px;padding-left: 15px;border-top-width:${threeArticlesBorderSize2};border-right-width:${threeArticlesBorderSize2};font-size:

12px;border-left-width:${threeArticlesBorderSize2};color: #FFFFFF;border-right-style: solid;border-bottom-style: solid;border-left-style: solid;border-top-color:${threeArticlesBorderColor2};border-right-color:${threeArticlesBorderColor2};border-bottom-color:${threeArticlesBorderColor2};border-left-color:${threeArticlesBorderColor2};font-family:Arial, Helvetica

sans-serif;border-bottom-width:${threeArticlesBorderSize2};background-color:${threeArticlesButtonBackgroundColor};">${threeArticlesLinkText}</a> </td>

</tr>

</tbody>

</table> </td>

</tr>

<tr>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table>

<tbody>

<tr>

</tr>

</tbody>

</table>

<tbody>

<tr>

<td class="bordered" 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: Arial, Helvetica sans-serif;-ms-text-size-adjust:

100%;background-color:${threeArticlesBackgroundColor4};border-top-width:${threeArticlesBorderSize3};border-left-color:${threeArticlesBorderColor3};border-bottom-width:${threeArticlesBorderSize3};border-left-width:${threeArticlesBorderSize3};border-top-style: solid;border-right-style: solid;border-bottom-style: solid;border-left-style:

solid;border-top-color:${threeArticlesBorderColor3};border-right-color:${threeArticlesBorderColor3};border-bottom-color:${threeArticlesBorderColor3};border-right-width:${threeArticlesBorderSize3};border-collapse: collapse;" bgcolor="${threeArticlesBackgroundColor4}">

<tbody>

<tr>

</div>

</center></td>

</tr>

<tr>

</tr>

<tr>

10.23.2016

</div> </td>

</tr>

<tr>

</tr>

<tr>

LOREM IPSUM DOLOR SIT AMET

</div> </td>

</tr>

<tr>

</tr>

<tr>

<td class="secondary-font text" 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;-ms-text-size-adjust: 100%;padding-left: 20px;font-family:'Questrial', Arial, sans-serif;color: #7e878b;font-size: 14px;line-height: 150%;padding-top: 0;padding-right: 20px;padding-bottom:

0;border-collapse: collapse;">

Lorem ipsum dolor sitan consectetur adipiscing ultrices pellentesque liti sett lacinia eros.

</div> </td>

</tr>

<tr>

</tr>

<tr>

<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: Arial, Helvetica sans-serif; border-collapse: collapse;" align="center" bgcolor="${threeArticlesButtonBackgroundColor2}"> <a href="${threeArticlesLink2}" target="_blank" class="primary-font button" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;display: inline-block;letter-spacing: 2px;text-decoration: none;border-top-style: solid;padding-top: 5px;padding-right: 15px;padding-bottom: 5px;padding-left: 15px;border-top-width:${threeArticlesBorderSize4};border-right-width:${threeArticlesBorderSize4};font-size:

12px;border-left-width:${threeArticlesBorderSize4};color: #FFFFFF;border-right-style: solid;border-bottom-style: solid;border-left-style: solid;border-top-color:${threeArticlesBorderColor4};border-right-color:${threeArticlesBorderColor4};border-bottom-color:${threeArticlesBorderColor4};border-left-color:${threeArticlesBorderColor4};font-family:Arial, Helvetica

sans-serif;border-bottom-width:${threeArticlesBorderSize4};background-color:${threeArticlesButtonBackgroundColor2};">${threeArticlesLinkText2}</a> </td>

</tr>

</tbody>

</table> </td>

</tr>

<tr>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table>

<tbody>

<tr>

</tr>

</tbody>

</table>

<tbody>

<tr>

<td class="bordered" 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: Arial, Helvetica sans-serif;-ms-text-size-adjust:

100%;background-color:${threeArticlesBackgroundColor6};border-top-width:${threeArticlesBorderSize5};border-left-color:${threeArticlesBorderColor5};border-bottom-width:${threeArticlesBorderSize5};border-left-width:${threeArticlesBorderSize5};border-top-style: solid;border-right-style: solid;border-bottom-style: solid;border-left-style:

solid;border-top-color:${threeArticlesBorderColor5};border-right-color:${threeArticlesBorderColor5};border-bottom-color:${threeArticlesBorderColor5};border-right-width:${threeArticlesBorderSize5};border-collapse: collapse;" bgcolor="${threeArticlesBackgroundColor6}">

<tbody>

<tr>

</div>

</center></td>

</tr>

<tr>

</tr>

<tr>

10.23.2016

</div> </td>

</tr>

<tr>

</tr>

<tr>

LOREM IPSUM DOLOR SIT AMET

</div> </td>

</tr>

<tr>

</tr>

<tr>

<td class="secondary-font text" 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;-ms-text-size-adjust: 100%;padding-left: 20px;font-family:'Questrial', Arial, sans-serif;color: #7e878b;font-size: 14px;line-height: 150%;padding-top: 0;padding-right: 20px;padding-bottom:

0;border-collapse: collapse;">

Lorem ipsum dolor sitan consectetur adipiscing ultrices pellentesque liti sett lacinia eros.

</div> </td>

</tr>

<tr>

</tr>

<tr>

<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: Arial, Helvetica sans-serif; border-collapse: collapse;" align="center" bgcolor="${threeArticlesButtonBackgroundColor3}"> <a href="${threeArticlesLink3}" target="_blank" class="primary-font button" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;display: inline-block;letter-spacing: 2px;text-decoration: none;border-top-style: solid;padding-top: 5px;padding-right: 15px;padding-bottom: 5px;padding-left: 15px;border-top-width:${threeArticlesBorderSize6};border-right-width:${threeArticlesBorderSize6};font-size:

12px;border-left-width:${threeArticlesBorderSize6};color: #FFFFFF;border-right-style: solid;border-bottom-style: solid;border-left-style: solid;border-top-color:${threeArticlesBorderColor6};border-right-color:${threeArticlesBorderColor6};border-bottom-color:${threeArticlesBorderColor6};border-left-color:${threeArticlesBorderColor6};font-family:Arial, Helvetica

sans-serif;border-bottom-width:${threeArticlesBorderSize6};background-color:${threeArticlesButtonBackgroundColor3};">${threeArticlesLinkText3}</a> </td>

</tr>

</tbody>

</table> </td>

</tr>

<tr>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table>

</center> </td>

</tr>

<tr>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table>

<tbody>

<tr>

<tbody>

<tr>

</tr>

<tr>

Lorem Ipsum adalah contoh teks atau dummy.

</div></td>

</tr>

<tr>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table>

<tbody>

<tr>

<tbody>

<tr>

</tr>

<tr>

</div>

</center> </td>

</tr>

<tr>

</tr>

</tbody>

</table>

</center> </td>

</tr>

</tbody>

</table>

<tbody>

<tr>

<tbody>

<tr>

</tr>

<tr>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum officiis dolorum, nulla, mollitia ducimus iure modi perferendis tenetur ea illum veniam aut sapiente deserunt repellendus. Excepturi illo numquam sint harum.

</div></td>

</tr>

<tr>

</tr>

</tbody>

</table>

</center> </td>

</tr>

</tbody>

</table>

<tbody>

<tr>

<tbody>

<tr>

</tr>

<tr>

<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: Arial, Helvetica sans-serif; border-collapse: collapse;" align="center" bgcolor="${callToActionButtonBackgroundColor}"> <a href="${callToActionLink}" 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:Arial, Helvetica sans-serif;color: white;padding-top: 12px;padding-right: 18px;padding-bottom: 12px;padding-left: 18px;border-top-width:${callToActionBorderSize};border-right-width:${callToActionBorderSize};letter-spacing:

2px;border-left-width:${callToActionBorderSize};border-top-style: solid;border-right-style: solid;border-bottom-style: solid;border-left-style: solid;border-top-color:${callToActionBorderColor};border-right-color:${callToActionBorderColor};border-bottom-color:${callToActionBorderColor};border-left-color:${callToActionBorderColor};border-bottom-width:${callToActionBorderSize};text-decoration:

none;background-color:${callToActionButtonBackgroundColor};">${callToActionLinkText}</a> </td>

</tr>

</tbody>

</table>

</center> </td>

</tr>

<tr>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table>

<tbody>

<tr>

<tbody>

<tr>

</tr>

<tr>

<tbody>

<tr>

<tbody>

</tr>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table>

</center> </td>

</tr>

<tr>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table>

<tbody>

<tr>

<tbody>

<tr>

</tr>

<tr>

<tbody>

<tr>

<td class="bordered" 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: Arial, Helvetica sans-serif;-ms-text-size-adjust:

100%;background-color:${horizontalBackgroundColor2};border-top-width:${horizontalBorderSize};border-left-color:${horizontalBorderColor};border-bottom-width:${horizontalBorderSize};border-left-width:${horizontalBorderSize};border-top-style: solid;border-right-style: solid;border-bottom-style: solid;border-left-style:

solid;border-top-color:${horizontalBorderColor};border-right-color:${horizontalBorderColor};border-bottom-color:${horizontalBorderColor};border-right-width:${horizontalBorderSize};border-collapse: collapse;" bgcolor="${horizontalBackgroundColor2}">

<tbody>

<tr>

<tbody>

<tr>

</tr>

<tr>

10.23.2016

</div> </td>

</tr>

<tr>

</tr>

<tr>

LOREM IPSUM DOLOR SIT AMET

</div> </td>

</tr>

<tr>

</tr>

<tr>

<td class="secondary-font text" 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;-ms-text-size-adjust: 100%;padding-left: 20px;font-family:'Questrial', Arial, sans-serif;color: #7e878b;font-size: 14px;line-height: 150%;padding-top: 0;padding-right: 20px;padding-bottom:

0;border-collapse: collapse;">

Lorem ipsum dolor sitan consectetur adipiscing ultrices pellentesque liti sett lacinia eros.

</div> </td>

</tr>

<tr>

</tr>

<tr>

<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: Arial, Helvetica sans-serif; border-collapse: collapse;" align="center" bgcolor="${horizontalButtonBackgroundColor}"> <a href="${horizontalLink}" target="_blank" class="primary-font

button" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;display: inline-block;letter-spacing: 2px;text-decoration: none;border-top-style: solid;padding-top: 5px;padding-right: 15px;padding-bottom: 5px;padding-left: 15px;border-top-width:${horizontalBorderSize2};border-right-width:${horizontalBorderSize2};font-size: 12px;border-left-width:${horizontalBorderSize2};color:

#FFFFFF;border-right-style: solid;border-bottom-style: solid;border-left-style: solid;border-top-color:${horizontalBorderColor2};border-right-color:${horizontalBorderColor2};border-bottom-color:${horizontalBorderColor2};border-left-color:${horizontalBorderColor2};font-family:Arial, Helvetica

sans-serif;border-bottom-width:${horizontalBorderSize2};background-color:${horizontalButtonBackgroundColor};">${horizontalLinkText}</a> </td>

</tr>

</tbody>

</table> </td>

</tr>

<tr>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table>

<tbody>

</tr>

<tr>

</div> </td>

</tr>

</tbody>

</table>

</center> </td>

</tr>

</tbody>

</table> </td>

</tr>

<tr>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table>

<tbody>

<tr>

<tbody>

<tr>

</tr>

<tr>

<!--[if gte mso 9]>

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

<v:fill type="frame" src="${overlayImageBackgroundImage}" color="${overlayImageBackgroundColor3}" />

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

<![endif]-->

<tbody>

<tr>

</tr>

<tr>

<tbody>

<tr>

</tr>

<tr>

Subtitle here

</div></td>

</tr>

<tr>

</tr>

<tr>

LOREM SIT DOLOR AMET

</div></td>

</tr>

<tr>

</tr>

<tr>

Lorem Ipsum adalah contoh teks atau dummy dalam industri percetakan dan penataan huruf atau typesetting...

</div></td>

</tr>

<tr>

</tr>

<tr>

<a href="http://mylink" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-decoration: none; color: #000000;">Discover More »</a>

</div></td>

</tr>

<tr>

</tr>

</tbody>

</table> </td>

</tr>

<tr>

</tr>

</tbody>

</table>

<!--[if gte mso 9]>

</v:textbox>

</v:rect>

<![endif]-->

</center></td>

</tr>

<tr>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table>

<tbody>

<tr>

<tbody>

<tr>

</tr>

<tr>

<tbody>

<tr>

</tr>

<tr>

</div>

</center> </td>

</tr>

<tr>

</tr>

<tr>

<tbody>

<tr>

OUR LOCATION

</div></td>

</tr>

<tr>

</tr>

<tr>

<a href="http://mylink" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-decoration: none; color: #ff9000;">Check on map »</a>

</div></td>

</tr>

</tbody>

</table> </td>

</tr>

<tr>

</tr>

</tbody>

</table>

<tbody>

<tr>

</tr>

</tbody>

</table>

<tbody>

<tr>

</tr>

<tr>

</div>

</center> </td>

</tr>

<tr>

</tr>

<tr>

<tbody>

<tr>

CONTACT US

</div></td>

</tr>

<tr>

</tr>

<tr>

<a href="http://mylink" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-decoration: none; color: #ff9000;">Send an email »</a>

</div></td>

</tr>

</tbody>

</table> </td>

</tr>

<tr>

</tr>

</tbody>

</table>

<tbody>

<tr>

</tr>

</tbody>

</table>

<tbody>

<tr>

</tr>

<tr>

</div>

</center> </td>

</tr>

<tr>

</tr>

<tr>

<tbody>

<tr>

ANY QUESTION?

</div></td>

</tr>

<tr>

</tr>

<tr>

<a href="http://mylink" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-decoration: none; color: #ff9000;">Check our FAQ »</a>

</div></td>

</tr>

</tbody>

</table> </td>

</tr>

<tr>

</tr>

</tbody>

</table>

</center> </td>

</tr>

<tr>

</tr>

</tbody>

</table> </td>

</tr>

<tr>

</tr>

</tbody>

</table>

<tbody>

<tr>

<tbody>

<tr>

<tbody>

<tr>

<tbody>

<tr>

</tr>

</tbody>

</table> </td>

<tbody>

<tr>

</tr>

</tbody>

</table> </td>

<tbody>

<tr>

</tr>

</tbody>

</table> </td>

<tbody>

<tr>

</tr>

</tbody>

</table> </td>

<tbody>

<tr>

</tr>

</tbody>

</table> </td>

<tbody>

<tr>

</tr>

</tbody>

</table> </td>

<tbody>

<tr>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table>

</div>

<tbody>

<tr>

<span style="color:#FFFFFF;"> CALL 800-462-2848 or your travel agent <br />to reserve your trip. <br />Open daily 6 am - 6 pm, Pacific time. </span>

</div> </td>

</tr>

</tbody>

</table>

<tbody>

<tr>

</tr>

</tbody>

</table>

<tbody>

<tr>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table> </td>

</tr>

<tr>

<p style="font-family: Roboto, sans-serif; font-size: 12px; line-height: 21px;">To ensure the delivery of Backroads emails to your inbox, just add travelupdate@backroads.com to your Email Address Book or Safe List. Thank you.</p>

<p style="font-family: Roboto, sans-serif; font-size: 12px; line-height: 21px;"><strong>UNSUBSCRIBE</strong> Our relationship with you is very important. If you no longer wish to receive occasional emails from us, please <a href="{{system.unsubscribeLink}}" target="_blank" style="color: #3797e0; text-decoration: underline;"><strong>unsubscribe</strong></a> here.</p>

<p style="font-family: Roboto, sans-serif; font-size: 12px; line-height: 21px;"><strong>UPDATE YOUR PREFERENCES</strong> We want to make sure we're sending you the emails you want to read.<br /> <a href="http://goactive.backroads.com/email-preferences.html" target="_blank" style="color: #3797e0; text-decoration: underline;"><strong>Update your email subscription preferences</strong></a> here.</p>

<p style="font-family: Roboto, sans-serif; font-size: 12px; line-height: 21px;">This email was sent by: <span style="color: #000000; font-family: Roboto, sans-serif; font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #eaeaea; display: inline !important; float: none;">Backroads, 801 Cedar Street, Berkeley, CA, 94710, USA</span></p>

</div></td>

</tr>

</tbody>

</table></td>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table>

</body>

</html>

Anonymous · ‎07-27-2017

Hi Frank,

Is there anyway you could past the correct code into the Marketo code and send to us? We are having problems developer getting us this template. It's been over 3 weeks and they haven't been able to fix this Marketo template. Thank you for your help. I also live in Dublin!

Anonymous · ‎07-21-2017

@brittanybrown

Can you past the code here?

Frank_Breen2 · ‎07-21-2017

The way Marketo have developed this template, it's supposed to cut off the edges, if you change the css to make it fit full width, then it makes the height too small. I had a lot of problems with a similar template in Outlook when doing physical testing, I found my content was hidden if I didn't download images. I try and stay clear of background images in email altogether, they are not worth the hassle, although some people here may have better solutions, I tend to stick to solid background colors and add images in normally using <img tag. Marketo template lack a lot of physical testing, they developed most of them via Litmus testing but when you put them in the real world, cracks start showing, they are great start though.

One small note if you do develop it more, in your code you had:

background:${heroBackgroundImage}

but it should be:

background:url(${heroBackgroundImage})

and

background-image:${heroBackgroundImage}

should be

background-image:url(${heroBackgroundImage})

Snow Bunny Template Mobile Phone Rendering

Snow Bunny Template Mobile Phone Rendering

Re: Snow Bunny Template Mobile Phone Rendering

Re: Snow Bunny Template Mobile Phone Rendering

Re: Snow Bunny Template Mobile Phone Rendering

Re: Snow Bunny Template Mobile Phone Rendering

Re: Snow Bunny Template Mobile Phone Rendering

Re: Snow Bunny Template Mobile Phone Rendering

Re: Snow Bunny Template Mobile Phone Rendering