SOLVED

Issues with iOS email rendering

Go to solution
kenmckown
Level 3

Issues with iOS email rendering

I am currently having an issue with an email rendering in mobile, specifically within the Marketo email editor and iOS devices when running through Email on Acid. The email does not display 100% width in the view. Works fine in all other clients.

 

Renders like this in iOS.

kenmckown_0-1723640476675.png

Also worth noting I used this same template on another email and it works fine. Here is the code for this specific email.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
  <head> 
    <title>Email</title> 
    <meta class="mktoColor" id="BodyBGColor" mktoname="Body Background Color" default="#eff0f4" /> 
    <meta class="mktoColor" id="blue_bg_color" mktoname="Background Color" default="#132C65" mktomodulescope="true" /> 
    <meta class="mktoColor" id="grey_bg_color" mktoname="Background Color" default="#f5f5f5" mktomodulescope="true" /> 
    <meta class="mktoColor" id="dark_grey_bg_color" mktoname="Background Color" default="#54565a" mktomodulescope="true" /> 
    <meta class="mktoColor" id="black_bg_color" mktoname="Background Color" default="#000000" mktomodulescope="true" /> 
    <meta class="mktoColor" id="yellow_bg_color" mktoname="Background Color" default="#ffce01" mktomodulescope="true" /> 
    <meta class="mktoColor" id="red_bg_color" mktoname="Background Color" default="#d62029" mktomodulescope="true" /> 
    <meta mktomodulescope="true" class="mktoColor" id="whiteBGColor" mktoname="Background Color" default="#ffffff" /> 
    <meta mktomodulescope="true" class="mktoColor" id="greyBGColor" mktoname="Background Color" default="#4c4d52" /> 
    <meta mktomodulescope="true" class="mktoColor" id="redBGColor" mktoname="Background Color" default="#d62029" /> 
    <meta mktomodulescope="true" class="mktoColor" id="blackBGColor" mktoname="Background Color" default="#000000" /> 
    <meta mktomodulescope="true" class="mktoColor" id="SBblackBGColor" mktoname="Background Color" default="#141414" /> 
    <meta mktomodulescope="true" class="mktoNumber" id="top_space1" mktoname="Top Space" default="1" step="1" min="0" max="100" /> 
    <meta mktomodulescope="true" class="mktoNumber" id="top_space10" mktoname="Top Space" default="10" step="1" min="0" max="100" /> 
    <meta mktomodulescope="true" class="mktoNumber" id="top_space20" mktoname="Top Space" default="20" step="1" min="0" max="100" /> 
    <meta mktomodulescope="true" class="mktoNumber" id="btm_space1" mktoname="Bottom Space" default="1" step="1" min="0" max="100" /> 
    <meta mktomodulescope="true" class="mktoNumber" id="btm_space10" mktoname="Bottom Space" default="10" step="1" min="0" max="100" /> 
    <meta mktomodulescope="true" class="mktoNumber" id="btm_space20" mktoname="Bottom Space" default="20" step="1" min="0" max="100" /> 
    <meta mktomodulescope="true" class="mktoList" id="logo-alignment" mktoname="Logo Alignment" default="center" values="center,right,left" /> 
    <meta mktomodulescope="true" class="mktoList" id="logo-alignment-bar" mktoname="Logo Alignment" default="left" values="center,right,left" /> 
    <meta mktomodulescope="true" class="mktoList" id="text-alignment" mktoname="Text Alignment" default="left" values="center,right,left" /> 
    <meta mktomodulescope="true" class="mktoColor" id="btn-bgcolor" mktoname="Button BG Color" default="#d62029" /> 
    <meta mktomodulescope="true" class="mktoColor" id="btn-bgcolor1" mktoname="Button BG Color" default="#f0f0f0" /> 
    <meta mktomodulescope="true" class="mktoColor" id="btn-bgcolor2" mktoname="Button BG Color" default="#000000" /> 
    <meta mktomodulescope="true" class="mktoColor" id="btn-bgcolor3" mktoname="Button BG Color" default="#E6E6E6" /> 
    <meta mktomodulescope="true" class="mktoColor" id="btn-border-color" mktoname="Button Border Color" default="#d62029" /> 
    <meta mktomodulescope="true" class="mktoColor" id="btn-border-color1" mktoname="Button Border Color" default="#f0f0f0" /> 
    <meta mktomodulescope="true" class="mktoColor" id="btn-border-color2" mktoname="Button Border Color" default="#dd2527" /> 
    <meta mktomodulescope="true" class="mktoColor" id="btn-text-color" mktoname="Button Text Color" default="#ffffff" /> 
    <meta mktomodulescope="true" class="mktoColor" id="btn-text-color1" mktoname="Button Text Color" default="#666666" /> 
    <meta mktomodulescope="true" class="mktoColor" id="btn-text-color2" mktoname="Button Text Color" default="#000000" /> 
    <meta mktomodulescope="true" class="mktoString" id="btn-cta-url" mktoname="Button Url" default="#" /> 
    <meta mktomodulescope="true" class="mktoString" id="btn-cta-text" mktoname="Button Text" default="Lorem ipsum dolor sit" /> 
    <meta mktomodulescope="true" class="mktoList" id="btn-alignment" mktoname="Button Alignment" default="center" values="center,right,left" /> 
    <meta mktomodulescope="true" class="mktoList" id="btn-alignment1" mktoname="Button Alignment" default="right" values="center,right,left" /> 
    <meta mktomodulescope="true" class="mktoList" id="btn-alignment2" mktoname="Button Alignment" default="left" values="center,right,left" /> 
    <meta mktomodulescope="true" class="mktoColor" id="border-bgcolor" mktoname="Border Color" default="#cac9cf" /> 
    <meta mktomodulescope="true" class="mktoList" id="border-alignment" mktoname="Border Alignment" default="center" values="left,center,right" /> 
    <meta mktomodulescope="true" class="mktoNumber" id="border-width" mktoname="Border Width(in %)" default="100" step="1" min="0" max="100" /> 
    <meta mktomodulescope="true" class="mktoNumber" id="border-height" mktoname="Border Height" default="1" step="1" min="0" max="100" /> 
    <meta mktomodulescope="true" class="mktoNumber" id="spacer" mktoname="Spacer Height" default="10" step="1" min="0" max="100" /> 
    <meta mktomodulescope="true" class="mktoList" id="social-alignment" mktoname="Social Icons Alignment" default="right" values="center,right,left" /> 
    <meta class="mktoString" id="font-family" mktoname="Font Family" default="'Lato', Arial, sans-serif" /> 
    <!--Background Image--> 
    <meta class="mktoColor" id="SectionID-bg-color" mktoname="Section: BgColor" default="#54565A" mktomodulescope="true" /> 
    <meta class="mktoString" id="SectionID-bg-gradient-1" mktoname="Section: BgGradient 1" default="rgba(84, 86, 90, .85)" mktomodulescope="true" /> 
    <meta class="mktoString" id="SectionID-bg-gradient-2" mktoname="Section: BgGradient 2" default="rgba(84, 86, 90, .85)" mktomodulescope="true" /> 
    <meta class="mktoImg" id="SectionID-bg-image" mktoname="Section: BgImage" default="https://via.placeholder.com/640X250.png/ccc/fff" mktomodulescope="true" /> 
    <meta class="mktoImg" id="SB SectionID-bg-image" mktoname="SB Section: BgImage" default="https://go.autoshopsolutions.com/rs/180-DGD-014/images/header-background.png" mktomodulescope="true" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" /> 
    <meta name="robots" content="noindex,nofollow" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
    <!--[if gte mso 9]>
		<xml>
			<o:OfficeDocumentSettings>
				<o:AllowPNG/>
				<o:PixelsPerInch>96</o:PixelsPerInch>
			</o:OfficeDocumentSettings>
		</xml>
		<![endif]--> 
    <!--[if mso]>
		<style> body,table tr,table td,a, span,table.MsoNormalTable,td,th{  font-family: helvetica, sans-serif !important;  }</style>
		<![endif]--> 
    <!--[if mso]>
      <style>
         li {text-align:-webkit-match-parent; display:list-item;text-indent: -1em;}
      </style>
      <![endif]–->
      <!--[if mso]>
      <style type="text/css">
         ul {
         margin: 0 0 0 40px !important;
         }
      </style>
      <![endif]--> 
    <style media="all">
			#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 */
			@-ms-viewport {
				width: device-width;
			}
		</style> 
    <style media="all">
			html {
				-webkit-text-size-adjust: none;
              	height:100%; /*give full height to document */
        		width:100%;
			}

			body {
				font-family: helvetica, sans-serif;
              	min-width: 100%;
			}

			p,
			.undoreset div p,
			.undoreset p {
				margin-top: 14px;
				margin-bottom: 14px;
			}

			img {
				border: 0px !important;
			}

			a[x-apple-data-detectors] {
				color: inherit !important;
				text-decoration: none !important;
				font-size: inherit !important;
				font-family: inherit !important;
				font-weight: inherit !important;
				line-height: inherit !important;
			}

			a {
				outline: none !important;
				text-decoration: none !important;
			}

			.btnLine {
				text-decoration: underline !important;
			}

			@media only screen and (max-width: 640px) {
				.main {
					width: 100% !important;
					min-width: 100% !important;
				}

				.inner_table {
					width: 90% !important;
					margin: 0 auto !important;
				}

				.res {
					width: 100% !important;
					display: block;
				}

				.center {
					text-align: center !important;
					margin: 0 auto;
				}
			}
		</style> 
    <style>
        .transparentbg {
          background-size: cover;
          width: 640px;
          height: 150px;
        }
      	.responsiveimg {
          width: 100%;
          height: auto;
        }
        @media screen and (max-width:640px) {
          .block { display: block !important; width: 100% !important; } 
        }
        </style> 
  </head> 
  <body style="margin-bottom: 0; -webkit-text-size-adjust: 100%; padding-bottom: 0;  margin-top: 0; margin-right: 0; -ms-text-size-adjust: 100%; margin-left: 0; padding-top: 0; padding-right: 0; padding-left: 0; width: 100%;"> 
    <!-- Outer table starts here --> 
    <table border="0" cellpadding="0" cellspacing="0" width="100%" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; border-spacing: 0; border-collapse: collapse;margin:0 auto;"> 
      <tbody> 
        <tr> 
          <td style="background-color:${BodyBGColor};" bgcolor="${BodyBGColor}"> 
            <table class="main" cellpadding="0" cellspacing="0" align="center" border="0" width="640" style="border-collapse: collapse; margin:0 auto;min-width:640px;"> 
              <tbody> 
                <tr> 
                  <td class="mktoContainer" id="template-wrapper" style="background-color:${BodyBGColor};" bgcolor="${BodyBGColor}">
                    <table class="mktoModule" mktoname="SB Header CTA" id="SB-Bar-CTA" width="100%" cellpadding="0" cellspacing="0" border="0" align="center" style="width: 100%!important;margin: 0 auto;border-spacing: 0;border-collapse: collapse;"> 
                      <tbody> 
                        <tr> 
                          <td bgcolor="${blackBGColor}" style="background-color:${blackBGColor};"> 
                            <table class="inner_table" width="600" align="center" border="0" cellpadding="0" cellspacing="0" style="width:600px;margin:0 auto;"> 
                              <tbody> 
                                <tr> 
                                  <td height="${top_space20}" style="line-height:1px;font-size:1px;"> &nbsp; </td> 
                                </tr> 
                                <tr> 
                                  <td align="${text-alignment}" valign="top" style="vertical-align: middle;"> 
                                    <div class="mktoImg" id="ImgSB1" mktoname="SB Logo" mktolockimgsize="false">
                                      <a href="https://learn.shopboss.net/boss-pay/?utm_source=Marketing Email&amp;utm_medium=PortCo Cross-Sell&amp;utm_campaign=2024_360P_XSell_Campaign_SB_MQL_Nurture&amp;utm_content=Contact Us&amp;utm_term=SBNurture&amp;cid=701VU00000BSn5xYAD" target="_blank"><img src="https://go.autoshopsolutions.com/rs/180-DGD-014/images/BossPay-alt-white.png" style="" /></a>
                                    </div> </td> 
                                  <td valign="top" style="vertical-align:middle;"> 
                                    <div class="mktoText" id="SBButton" mktoname="Header Button">
                                      <table align="${btn-alignment1}" border="0" cellpadding="0" cellspacing="0" style="font-family: Nimbus Sans, Arial;"> 
                                        <tbody> 
                                          <tr> 
                                            <td bgcolor="${btn-bgcolor2}" style="border:1px solid ${btn-border-color2};background-color:${btn-bgcolor2};font-family:nimbus sans, arial;font-size: 14px;text-align: center; color:${btn-text-color};padding: 12px 18px;line-height:16px;display:block;font-weight:normal;" valign="top"> <a target="_blank" style="text-decoration: none;color:${btn-text-color}; outline: none; font-weight:bold;" href="${btn-cta-url}">${btn-cta-text}</a> </td> 
                                          </tr> 
                                        </tbody> 
                                      </table>
                                    </div> </td> 
                                </tr> 
                                <tr> 
                                  <td height="${btm_space20}" style="line-height:1px;font-size:1px;"> &nbsp; </td> 
                                </tr> 
                              </tbody> 
                            </table> </td> 
                        </tr> 
                      </tbody> 
                    </table>
                    <table class="mktoModule" mktoname="SB Header Text1" id="sb_header_text1" width="100%" cellpadding="0" cellspacing="0" border="0" align="center" style="width: 100%!important;height:150px;margin: 0 auto;border-spacing: 0;border-collapse: collapse; background-color:#141414;"> 
                      <tbody> 
                        <tr> 
                          <td class="transparentbg" align="center" valign="top" style="vertical-align:middle;text-align:center;"> 
                            <!--<div class="mktoText" id="TransparentText4" mktoname="Text" style="color: #ffffff; font-family: Zuume, Impact; font-size: 40px; "><span class="impact">LOREM IPSUM</span></div>--> 
                            <!--<div class="mktoText" id="TransparentText5" mktoname="Text" style="color: #ffffff; font-style: italic; font-family: Zuume, Impact; font-size: 40px; "><span class="impact">DOLOR SIT AMET!</span></div>--> 
                            <div class="mktoText" id="SBHeaderText1" mktoname="SBHeaderText1" style="color: #ffffff; text-align: center; margin: 20px 50px 10px 50px; font-family: Zuume, Impact; font-size: 35px;">
                              <div>
                                 UPGRADE YOUR SHOP'S TECHNOLOGY &amp; CUSTOMER EXPERIENCE WITH BOSS PAY 
                                <br /> 
                              </div>
                            </div> </td> 
                        </tr> 
                      </tbody> 
                    </table>
                    <table class="mktoModule" mktoname="SBImageCTA" id="SBImageCTA" style="background-color:#141414;" cellpadding="20" cellspacing="0" border="0"> 
                      <tbody> 
                        <tr> 
                          <td class="block" width="45%"> 
                            <div class="mktoImg" mktoname="SBLeftImage" id="SBLeftImage" mktolockimgsize="true">
                              <a href="https://learn.shopboss.net/boss-pay/?utm_source=Marketing Email&amp;utm_medium=PortCo Cross-Sell&amp;utm_campaign=2024_360P_XSell_Campaign_SB_MQL_Nurture&amp;utm_content=Contact Us&amp;utm_term=SBNurture&amp;cid=701VU00000BSn5xYAD" target="_blank"><img src="https://go.autoshopsolutions.com/rs/180-DGD-014/images/Boss Pay - Customer signing on phone with green background.png" style="" /></a>
                            </div> </td> 
                          <td class="block" width="55%"> 
                            <table cellpadding="0" cellspacing="0" border="0"> 
                              <tbody> 
                                <tr> 
                                  <td> 
                                    <div class="mktoText" id="Right-Text1" mktoname="Right-Text1" style="font-family: Zuume, Impact; color: #ffffff; font-size: 25px; margin-right: 40px;">
                                      <div>
                                         SEAMLESS INTEGRATION WITH SHOP BOSS 
                                        <br /> 
                                      </div>
                                    </div> </td> 
                                </tr> 
                                <tr> 
                                  <td> 
                                    <div class="mktoText" id="Right-Text2" mktoname="Right-Text2" style="font-family: Nimbus Sans, Arial; color: #ffffff; font-size: 15px; margin-right: 40px;">
                                      <div>
                                         Our fully integrated payment system ensures your reconciliations are easy and simple, eliminating the need to hunt down and match ROs and receipts. This means you can focus more on running your shop and less on administrative tasks. 
                                      </div>
                                    </div> </td> 
                                </tr> 
                                <tr> 
                                  <td> 
                                    <div> 
                                      <table align="${btn-alignment2}" border="0" cellpadding="0" cellspacing="0" style="margin: 15px 5px 5px 5px;" class="mktoText" id="SBButton1" mktoname="BannerButton">
                                        <tbody> 
                                          <tr> 
                                            <td bgcolor="${btn-bgcolor2}" style="border:1px solid ${btn-border-color2};background-color:${btn-bgcolor2};font-family:nimbus sans, arial, sans-serif;font-size: 12px;text-align: center; color:${btn-text-color};padding: 12px 18px;line-height:16px;display:block;font-weight:normal;" valign="top"> <a target="_blank" style="text-decoration: none;color:${btn-text-color}; outline: none;font-weight:bold;" href="${btn-cta-url}">${btn-cta-text}</a> </td> 
                                          </tr> 
                                        </tbody>
                                      </table> 
                                    </div> </td> 
                                </tr> 
                              </tbody> 
                            </table> </td> 
                        </tr> 
                      </tbody> 
                    </table>
                    <table cellpadding="10" cellspacing="0" class="mktoModule" mktoname="SBIconText" id="SBIconText" width="100%" style="height: 100%!important; width: 100%!important; background-color: #141414;"> 
                      <tbody> 
                        <tr> 
                          <td colspan="3"> 
                            <div class="mktoText" id="IconSB" mktoname="IconSB" style="font-family: Zuume, Impact; color: #FFFFFF; margin: 40px 0px 0px 0px; font-size: 25px;">
                              <div>
                                 WHY BOSS PAY? 
                                <br /> 
                              </div>
                            </div> </td> 
                        </tr> 
                        <!--TOP ROW--> 
                        <tr valign="top"> 
                          <td style="width:33%;"> 
                            <!--Left Block Top--> 
                            <table style="height: 100%!important; width: 97%; border: 1px solid #666666; border-radius: 5px;"> 
                              <tbody> 
                                <tr valign="top"> 
                                  <td> 
                                    <div class="mktoImg" mktoname="LeftBlockImg1" id="LeftBlockImg1" style="margin: 5px 5px 5px 5px;" mktolockimgsize="false">
                                      <img src="https://go.autoshopsolutions.com/rs/180-DGD-014/images/Boss Pay - remote payments.png" height="25" style="" width="25" />
                                    </div> 
                                    <div class="mktoText" mktoname="LeftBlockHeader1" id="LeftBlockHeader1" style="color: #FFFFFF; margin: 5px 5px 5px 5px; font-weight: bold; font-size: 17px;">
                                      <div>
                                         Remote Payments: 
                                        <br /> 
                                      </div>
                                    </div> 
                                    <div class="mktoText" mktoname="LeftBlockText1" id="LeftBlockText1" style="color: #FFFFFF; margin: 5px 5px 5px 5px; font-size: 14px;">
                                      <div>
                                         Allow your customers to pay from anywhere, anytime, making transactions more convenient for them and quicker for you. 
                                      </div>
                                    </div> </td> 
                                </tr> 
                              </tbody> 
                            </table> 
                            <!--Left Block Top End--> </td> 
                          <td style="width:33%;"> 
                            <!--Mid Block Top--> 
                            <table style="height: 100%!important; width: 97%; border: 1px solid #666666; border-radius: 5px;"> 
                              <tbody> 
                                <tr valign="top"> 
                                  <td> 
                                    <div class="mktoImg" mktoname="MidBlock1" id="MidBlockImg1" style="margin: 5px 5px 5px 5px;" mktolockimgsize="false">
                                      <img src="https://go.autoshopsolutions.com/rs/180-DGD-014/images/Boss Pay - Consumer Financing.png" height="25" style="" width="25" />
                                    </div> 
                                    <div class="mktoText" mktoname="MidBlockHeader1" id="MidBlockHeader1" style="color: #FFFFFF; margin: 5px 5px 5px 5px; font-weight: bold; font-size: 17px;">
                                      <div>
                                         Consumer Financing: 
                                        <br /> 
                                      </div>
                                    </div> 
                                    <div class="mktoText" mktoname="MidBlockText1" id="MidBlockText1" style="color: #FFFFFF; margin: 5px 5px 5px 5px; font-size: 14px;">
                                      <div>
                                         Offer secure and private financing options directly from their phone or email, ensuring a hassle-free experience. 
                                      </div>
                                    </div> </td> 
                                </tr> 
                              </tbody> 
                            </table> 
                            <!--Mid Block Top End--> </td> 
                          <td style="width:33%;"> 
                            <!--Right Block Top--> 
                            <table style="height: 100%!important; width: 97%; border: 1px solid #666666; border-radius: 5px;"> 
                              <tbody> 
                                <tr valign="top"> 
                                  <td> 
                                    <div class="mktoImg" mktoname="RightBlock1" id="RightBlockImg1" style="margin: 5px 5px 5px 5px;" mktolockimgsize="false">
                                      <img src="https://go.autoshopsolutions.com/rs/180-DGD-014/images/Boss Pay - Secure.png" height="25" style="" width="25" />
                                    </div> 
                                    <div class="mktoText" mktoname="RightBlockHeader1" id="RightBlockHeader1" style="color: #FFFFFF; margin: 5px 5px 5px 5px; font-weight: bold; font-size: 17px;">
                                      <div>
                                         Top-Notch Security: 
                                        <br /> 
                                      </div>
                                    </div> 
                                    <div class="mktoText" mktoname="RightBlockText1" id="RightBlockText1" style="color: #FFFFFF; margin: 5px 5px 5px 5px; font-size: 14px;">
                                      <div>
                                         Our platform provides robust security measures to protect every transaction, giving you and your customers peace of mind. 
                                      </div>
                                    </div> </td> 
                                </tr> 
                              </tbody> 
                            </table> 
                            <!--Right Block Top End--> </td> 
                        </tr> 
                        <!--TOP ROW END--> 
                        <!--BOTTOM ROW--> 
                        <tr valign="top"> 
                          <td style="width:33%;"> 
                            <!--Left Block Top--> 
                            <table style="height: 100%!important; width: 97%; border: 1px solid #666666; border-radius: 5px;"> 
                              <tbody> 
                                <tr valign="top"> 
                                  <td> 
                                    <div class="mktoImg" mktoname="LeftBlockImg2" id="LeftBlockImg2" style="margin: 5px 5px 5px 5px;" mktolockimgsize="false">
                                      <img src="https://go.autoshopsolutions.com/rs/180-DGD-014/images/Boss Pay - Customer Service.png" height="25" style="" width="25" />
                                    </div> 
                                    <div class="mktoText" mktoname="LeftBlockHeader2" id="LeftBlockHeader2" style="color: #FFFFFF; margin: 5px 5px 5px 5px; font-weight: bold; font-size: 17px;">
                                      <div>
                                         Exceptional Customer Service: 
                                        <br /> 
                                      </div>
                                    </div> 
                                    <div class="mktoText" mktoname="LeftBlockText2" id="LeftBlockText2" style="color: #FFFFFF; margin: 5px 5px 5px 5px; font-size: 14px;">
                                      <div>
                                         Our dedicated support team is always ready to assist you, ensuring smooth operations and addressing any concerns promptly. 
                                      </div>
                                    </div> </td> 
                                </tr> 
                              </tbody> 
                            </table> 
                            <!--Left Block Top End--> </td> 
                          <td style="width:33%;"> 
                            <!--Mid Block Top--> 
                            <table style="height: 100%!important; width: 97%; border: 1px solid #666666; border-radius: 5px;"> 
                              <tbody> 
                                <tr valign="top"> 
                                  <td> 
                                    <div class="mktoImg" mktoname="MidBlockImg2" id="MidBlockImg2" style="margin: 5px 5px 5px 5px;" mktolockimgsize="false">
                                      <img src="https://go.autoshopsolutions.com/rs/180-DGD-014/images/Boss Pay - Integration.png" height="25" style="" width="25" />
                                    </div> 
                                    <div class="mktoText" mktoname="MidBlockHeader2" id="MidBlockHeader2" style="color: #FFFFFF; margin: 5px 5px 5px 5px; font-weight: bold; font-size: 17px;">
                                      <div>
                                         Seamless Payments Integration: 
                                        <br /> 
                                      </div>
                                    </div> 
                                    <div class="mktoText" mktoname="MidBlockText2" id="MidBlockText2" style="color: #FFFFFF; margin: 5px 5px 5px 5px; font-size: 14px;">
                                      <div>
                                         BOSS Pay works flawlessly with your Shop Boss software, streamlining your workflow and reducing administrative overhead. 
                                      </div>
                                    </div> </td> 
                                </tr> 
                              </tbody> 
                            </table> 
                            <!--Mid Block Top End--> </td> 
                          <td style="width:33%;"> 
                            <!--Right Block Top--> 
                            <table style="height: 100%!important; width: 97%; border: 1px solid #666666; border-radius: 5px;"> 
                              <tbody> 
                                <tr valign="top"> 
                                  <td> 
                                    <div class="mktoImg" mktoname="RightBlockImg2" id="RightBlockImg2" style="margin: 5px 5px 5px 5px;" mktolockimgsize="false">
                                      <img src="https://go.autoshopsolutions.com/rs/180-DGD-014/images/Boss Pay - Efficiency.png" height="25" style="" width="25" />
                                    </div> 
                                    <div class="mktoText" mktoname="RightBlockHeader2" id="RightBlockHeader2" style="color: #FFFFFF; margin: 5px 5px 5px 5px; font-weight: bold; font-size: 17px;">
                                      <div>
                                         Increase Shop Efficiency: 
                                      </div>
                                    </div> 
                                    <div class="mktoText" mktoname="RightBlockText2" id="RightBlockText2" style="color: #FFFFFF; margin: 5px 5px 5px 5px; font-size: 14px;">
                                      <div>
                                         Boost your shop’s productivity with integrated solutions that reduce administrative tasks and improve overall workflow. 
                                      </div>
                                    </div> </td> 
                                </tr> 
                              </tbody> 
                            </table> 
                            <!--Right Block Top End--> </td> 
                        </tr> 
                        <!--BOTTOM ROW END--> 
                      </tbody> 
                    </table>
                    <table class="mktoModule" mktoname="Testimonial" id="Testimonial" width="100%" cellpadding="30" cellspacing="0" border="0" align="center" style="background-color: #FFFFFF;"> 
                      <tbody> 
                        <tr> 
                          <td style="vertical-align:top;" width="45%" valign="top" class="block"> 
                            <!--Left Side--> 
                            <table style="font-family: Zuume, Impact; font-size: 35px;" width="100%"> 
                              <tbody> 
                                <tr> 
                                  <td valign="top" style="vertical-align:top;"> 
                                    <div class="mktoImg" mktoname="SBQuoteImg" id="SBQuoteImg">
                                      <img src="https://go.autoshopsolutions.com/rs/180-DGD-014/images/quote.png" />
                                    </div> 
                                    <div class="mktoText" mktoname="SBTestimonial1" id="SBTestimonial1" style="">
                                      <div>
                                         ONLY REGRET I HAVE 
                                        <br /> 
                                      </div>
                                    </div> 
                                    <div class="mktoText" mktoname="SBTestimonial2" id="SBTestimonial2" style="font-style: italic;">
                                      <div>
                                         IS NOT SIGNING UP WITH THEM&nbsp;SOONER 
                                        <br /> 
                                      </div>
                                    </div> 
                                    <div class="mktoText" mktoname="SBTestimonial3" id="SBTestimonial3" style="">
                                      <div></div>
                                    </div> </td> 
                                </tr> 
                              </tbody> 
                            </table> 
                            <!--Left Side END--> </td> 
                          <td style="vertical-align:top;" width="55%" valign="top" class="block"> 
                            <!--Right Side--> 
                            <table style="font-family:nimbus sans, arial;" width="100%"> 
                              <tbody> 
                                <tr> 
                                  <td valign="top" style="vertical-align:top;"> 
                                    <div class="mktoText" mktoname="SBTestimonial4" id="SBTestimonial4" style="font-size: 14px;">
                                      <div style="margin-right:40px;">
                                         “I've been in business for over 20 years in the automotive industry and I've never dealt with a credit card processing company as great as 360. Most competitive rates, best customer service allows me to focus more on the business. The only regret I have is not signing up with them sooner.” 
                                        <br /> 
                                      </div>
                                    </div> 
                                    <div class="mktoText" mktoname="SBTestimonial5" id="SBTestimonial5" style="font-size: 14px; margin-top: 15px; margin-right: 40px; font-weight: bold;">
                                      <div>
                                         GEORGE HALL 
                                        <br /> 
                                      </div>
                                    </div> 
                                    <div class="mktoText" mktoname="SBTestimonial6" id="SBTestimonial6" style="font-size: 12px; margin-right: 40px;">
                                      <div>
                                         EXLINE AUTOMOTIVE 
                                        <br /> 
                                      </div>
                                    </div> </td> 
                                </tr> 
                              </tbody> 
                            </table> 
                            <!--Right Side END--> </td> 
                        </tr> 
                      </tbody> 
                    </table>
                    <table cellpadding="0" cellspacing="0" class="mktoModule" mktoname="SBSideImageWithCTA" id="SBSideImageWithCTA" width="100%" style="width: 100%!important; background-color: #e6e6e6;"> 
                      <tbody> 
                        <tr> 
                          <td class="block"> 
                            <!--Left Side Image--> 
                            <table cellpadding="0" cellspacing="0"> 
                              <tbody> 
                                <tr> 
                                  <td> 
                                    <div> 
                                      <img src="https://go.autoshopsolutions.com/rs/180-DGD-014/images/content-img2.png?version=0" /> 
                                    </div> </td> 
                                </tr> 
                              </tbody> 
                            </table> 
                            <!--Left Side Image End--> </td> 
                          <!--Right Side Text and Button--> 
                          <td class="block"> 
                            <table style="width: 100%!important;"> 
                              <tbody> 
                                <tr> 
                                  <td> 
                                    <div class="mktoText" mktoname="RightSideText1" id="RightSideText1" style="font-family: Zuume, Impact; font-size: 20px; margin:20px;">
                                      <div> 
                                        <span style="font-size: 28px;">READY TO TRANSFORM YOUR SHOP'S CUSTOMER EXPERIENCE?</span> 
                                      </div>
                                    </div> 
                                    <div class="mktoText" mktoname="RightSideText2" id="RightSideText2" style="font-family:nimbus sans, arial; font-size: 15px; margin:20px;">
                                      <div>
                                         Discover how BOSS Pay can revolutionize your payment processes and elevate your customer experience. Let’s discuss how we can help you achieve your goals. 
                                      </div>
                                    </div> 
                                    <div class="mktoText" id="SBButton2" mktoname="Side Button" style="margin:20px;">
                                      <table align="${btn-alignment2}" border="0" cellpadding="0" cellspacing="0"> 
                                        <tbody> 
                                          <tr> 
                                            <td bgcolor="${btn-bgcolor3}" style="border:1px solid ${btn-border-color2};background-color:${btn-bgcolor3};font-family:nimbus sans, arial, sans-serif;font-size: 14px;text-align: center; color:${btn-text-color};padding: 12px 18px;line-height:16px;display:block;font-weight:normal;" valign="top"> <a target="_blank" style="text-decoration: none;color:${btn-text-color1}; outline: none;font-weight:bold;" href="${btn-cta-url}">${btn-cta-text}</a> </td> 
                                          </tr> 
                                        </tbody> 
                                      </table>
                                    </div> </td> 
                                </tr> 
                              </tbody> 
                            </table> </td> 
                          <!--Right Side Text and Button End--> 
                        </tr> 
                      </tbody> 
                    </table>
                    <table class="mktoModule" mktoname="SBFooterBar" id="SBFooterBar" width="100%" cellpadding="0" cellspacing="0" border="0" align="center" style="width: 100%!important;margin: 0 auto;border-spacing: 0;border-collapse: collapse;"> 
                      <tbody> 
                        <tr> 
                          <td bgcolor="${blackBGColor}" style="background-color:${blackBGColor};"> 
                            <table class="inner_table" width="600" align="center" border="0" cellpadding="0" cellspacing="0" style="width:600px;margin:0 auto;"> 
                              <tbody> 
                                <tr> 
                                  <td height="${top_space20}" style="line-height:1px;font-size:1px;"> &nbsp; </td> 
                                </tr> 
                                <tr> 
                                  <td align="${text-alignment}" valign="top" style="vertical-align: middle;"> 
                                    <div class="mktoText" id="SBFooterBarPhone" mktoname="SBFooterBarPhone">
                                      <div style="color: #ffffff; font-family: nimbus, arial; font-size: 13px;">
                                         Phone Number Here 
                                        <span style="color: #dd2527;">858.252.4007</span> 
                                      </div>
                                    </div> </td> 
                                  <td valign="top" style="vertical-align:middle; align: right;"> 
                                    <div class="mktoText" id="SBFooterBarSocialIcons" mktoname="SBFooterBarSocialIcons">
                                      <table align="${btn-alignment1}" border="0" cellpadding="0" cellspacing="0" style="font-family: Nimbus Sans, Arial;"> 
                                        <tbody> 
                                          <tr> 
                                            <td valign="top"><a href="https://www.facebook.com/shopbosspro" target="_blank"><img src="https://go.autoshopsolutions.com/rs/180-DGD-014/images/Facebook_red.png" style="width: 14px;" /></a>&nbsp;&nbsp;<a href="https://www.youtube.com/@ShopBossPros" target="_blank"><img src="https://go.autoshopsolutions.com/rs/180-DGD-014/images/YouTube_red.png" style="width: 14px;" /></a>&nbsp; <a href="https://www.linkedin.com/company/csb-technologies-dba-shop-boss-pro/" target="_blank"><img src="https://go.autoshopsolutions.com/rs/180-DGD-014/images/linkedin_red.png" style="width: 12px;" height="13" /></a>&nbsp; <a href="https://www.instagram.com/shopbosspro/" target="_blank"><img src="https://go.autoshopsolutions.com/rs/180-DGD-014/images/instagram_red.png" style="width: 14px;" /></a>&nbsp;</td> 
                                          </tr> 
                                        </tbody> 
                                      </table>
                                    </div> </td> 
                                </tr> 
                                <tr> 
                                  <td height="${btm_space20}" style="line-height:1px;font-size:1px;"> &nbsp; </td> 
                                </tr> 
                              </tbody> 
                            </table> </td> 
                        </tr> 
                      </tbody> 
                    </table>
                    <table class="mktoModule" mktoname="Footer Section" id="footersectiona6d5ddef-5ed2-4ca1-9370-03a4afc8ef4c" width="100%" cellpadding="0" cellspacing="0" border="0" align="center" style="width: 100%;margin: 0 auto;border-spacing: 0;border-collapse: collapse;"> 
                      <tbody> 
                        <tr> 
                          <td bgcolor="${whiteBGColor}" style="background-color: ${whiteBGColor};"> 
                            <table class="inner_table" width="540" align="center" border="0" cellpadding="0" cellspacing="0" style="width:540px;margin:0 auto;"> 
                              <tbody> 
                                <tr> 
                                  <td height="${top_space20}" style="line-height: 1px;font-size: 1px;"> &nbsp; </td> 
                                </tr> 
                                <tr> 
                                  <td height="15" style="line-height: 1px;font-size: 1px;"> &nbsp; </td> 
                                </tr> 
                                <tr> 
                                  <td class="center" style="font-size:12px;mso-line-height-rule: exactly;line-height:15px;color:#666666;font-family: ${font-family};font-weight:400;text-align:center;"> 
                                    <div class="mktNoTrack" id="footertext1" mktoname="Text 1"> 
                                      <div>
                                         This email was sent to {{lead.Email Address}}, if you would like to unsubscribe, click 
                                        <a class="btnLine" href="https://shopboss.net/preference-center/" style="color: #666666;">here</a>. 
                                      </div> 
                                    </div> </td> 
                                </tr> 
                                <tr> 
                                  <td height="12" style="line-height: 1px;font-size: 1px;"> &nbsp; </td> 
                                </tr> 
                                <tr> 
                                  <td class="center" style="font-size:12px;mso-line-height-rule: exactly;line-height:18px;color:#666666;font-family: ${font-family};font-weight:400;text-align:center;"> 
                                    <div class="mktoText" id="footertext23e8904af-8088-48e9-a1b5-4c1de6e31ac4" mktoname="Text 2">
                                      <div>
                                         Shop Boss 
                                      </div>
                                    </div> </td> 
                                </tr> 
                                <tr> 
                                  <td class="center" style="font-size:12px;mso-line-height-rule: exactly;line-height:18px;color:#666666;font-family: ${font-family};font-weight:400;text-align:center;"> 
                                    <div class="mktoText" id="footertext347be13de-d375-4c13-9e0c-3b5901e7ad8b" mktoname="Text 3">
                                      <div>
                                         2035 Lakeside Center Way, Knoxville TN 37922 United States 
                                      </div>
                                    </div> </td> 
                                </tr> 
                                <tr> 
                                  <td height="7" style="line-height: 1px;font-size: 1px;"> &nbsp; </td> 
                                </tr> 
                                <tr> 
                                  <td style="font-size:12px;mso-line-height-rule: exactly;line-height:18px;color:#666666;font-family: ${font-family};font-weight:700;text-align:center;"> 
                                    <div class="mktoText" id="footertext4eb0a4847-b477-418f-b1dd-95832c7cf5c0" mktoname="Text 4">
                                      <div> 
                                        <a href="{{system.forwardToFriendLink}}" style="outline:none;text-decoration:none;color:#666666;">Send to a Friend</a>&nbsp;&nbsp;· 
                                        <a href="{{system.viewAsWebpageLink}}" style="outline:none;text-decoration:none;color:#666666;">View Online</a> 
                                      </div>
                                    </div> </td> 
                                </tr> 
                                <tr> 
                                  <td height="${btm_space20}" style="line-height: 1px;font-size: 1px;"> &nbsp; </td> 
                                </tr> 
                              </tbody> 
                            </table> </td> 
                        </tr> 
                      </tbody> 
                    </table></td> 
                </tr> 
              </tbody> 
            </table> </td> 
        </tr> 
      </tbody> 
    </table> 
    <!-- Outer table ends here -->  
  </body>
</html>
Tags (2)
1 ACCEPTED SOLUTION

Accepted Solutions
Disha_Goyal6
Level 4

Re: Issues with iOS email rendering

Hi @kenmckown, I have checked and found that there were multiple issues in the coding that you shared.

Now, I have fixed the code. Please check the same in IOS.

 

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

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">

  <head> 

    <title>Email</title> 

    <meta class="mktoColor" id="BodyBGColor" mktoname="Body Background Color" default="#eff0f4" /> 

    <meta class="mktoColor" id="blue_bg_color" mktoname="Background Color" default="#132C65" mktomodulescope="true" /> 

    <meta class="mktoColor" id="grey_bg_color" mktoname="Background Color" default="#f5f5f5" mktomodulescope="true" /> 

    <meta class="mktoColor" id="dark_grey_bg_color" mktoname="Background Color" default="#54565a" mktomodulescope="true" /> 

    <meta class="mktoColor" id="black_bg_color" mktoname="Background Color" default="#000000" mktomodulescope="true" /> 

    <meta class="mktoColor" id="yellow_bg_color" mktoname="Background Color" default="#ffce01" mktomodulescope="true" /> 

    <meta class="mktoColor" id="red_bg_color" mktoname="Background Color" default="#d62029" mktomodulescope="true" /> 

    <meta mktomodulescope="true" class="mktoColor" id="whiteBGColor" mktoname="Background Color" default="#ffffff" /> 

    <meta mktomodulescope="true" class="mktoColor" id="greyBGColor" mktoname="Background Color" default="#4c4d52" /> 

    <meta mktomodulescope="true" class="mktoColor" id="redBGColor" mktoname="Background Color" default="#d62029" /> 

    <meta mktomodulescope="true" class="mktoColor" id="blackBGColor" mktoname="Background Color" default="#000000" /> 

    <meta mktomodulescope="true" class="mktoColor" id="SBblackBGColor" mktoname="Background Color" default="#141414" /> 

    <meta mktomodulescope="true" class="mktoNumber" id="top_space1" mktoname="Top Space" default="1" step="1" min="0" max="100" /> 

    <meta mktomodulescope="true" class="mktoNumber" id="top_space10" mktoname="Top Space" default="10" step="1" min="0" max="100" /> 

    <meta mktomodulescope="true" class="mktoNumber" id="top_space20" mktoname="Top Space" default="20" step="1" min="0" max="100" /> 

    <meta mktomodulescope="true" class="mktoNumber" id="btm_space1" mktoname="Bottom Space" default="1" step="1" min="0" max="100" /> 

    <meta mktomodulescope="true" class="mktoNumber" id="btm_space10" mktoname="Bottom Space" default="10" step="1" min="0" max="100" /> 

    <meta mktomodulescope="true" class="mktoNumber" id="btm_space20" mktoname="Bottom Space" default="20" step="1" min="0" max="100" /> 

    <meta mktomodulescope="true" class="mktoList" id="logo-alignment" mktoname="Logo Alignment" default="center" values="center,right,left" /> 

    <meta mktomodulescope="true" class="mktoList" id="logo-alignment-bar" mktoname="Logo Alignment" default="left" values="center,right,left" /> 

    <meta mktomodulescope="true" class="mktoList" id="text-alignment" mktoname="Text Alignment" default="left" values="center,right,left" /> 

    <meta mktomodulescope="true" class="mktoColor" id="btn-bgcolor" mktoname="Button BG Color" default="#d62029" /> 

    <meta mktomodulescope="true" class="mktoColor" id="btn-bgcolor1" mktoname="Button BG Color" default="#f0f0f0" /> 

    <meta mktomodulescope="true" class="mktoColor" id="btn-bgcolor2" mktoname="Button BG Color" default="#000000" /> 

    <meta mktomodulescope="true" class="mktoColor" id="btn-bgcolor3" mktoname="Button BG Color" default="#E6E6E6" /> 

    <meta mktomodulescope="true" class="mktoColor" id="btn-border-color" mktoname="Button Border Color" default="#d62029" /> 

    <meta mktomodulescope="true" class="mktoColor" id="btn-border-color1" mktoname="Button Border Color" default="#f0f0f0" /> 

    <meta mktomodulescope="true" class="mktoColor" id="btn-border-color2" mktoname="Button Border Color" default="#dd2527" /> 

    <meta mktomodulescope="true" class="mktoColor" id="btn-text-color" mktoname="Button Text Color" default="#ffffff" /> 

    <meta mktomodulescope="true" class="mktoColor" id="btn-text-color1" mktoname="Button Text Color" default="#666666" /> 

    <meta mktomodulescope="true" class="mktoColor" id="btn-text-color2" mktoname="Button Text Color" default="#000000" /> 

    <meta mktomodulescope="true" class="mktoString" id="btn-cta-url" mktoname="Button Url" default="#" /> 

    <meta mktomodulescope="true" class="mktoString" id="btn-cta-text" mktoname="Button Text" default="Lorem ipsum dolor sit" /> 

    <meta mktomodulescope="true" class="mktoList" id="btn-alignment" mktoname="Button Alignment" default="center" values="center,right,left" /> 

    <meta mktomodulescope="true" class="mktoList" id="btn-alignment1" mktoname="Button Alignment" default="right" values="center,right,left" /> 

    <meta mktomodulescope="true" class="mktoList" id="btn-alignment2" mktoname="Button Alignment" default="left" values="center,right,left" /> 

    <meta mktomodulescope="true" class="mktoColor" id="border-bgcolor" mktoname="Border Color" default="#cac9cf" /> 

    <meta mktomodulescope="true" class="mktoList" id="border-alignment" mktoname="Border Alignment" default="center" values="left,center,right" /> 

    <meta mktomodulescope="true" class="mktoNumber" id="border-width" mktoname="Border Width(in %)" default="100" step="1" min="0" max="100" /> 

    <meta mktomodulescope="true" class="mktoNumber" id="border-height" mktoname="Border Height" default="1" step="1" min="0" max="100" /> 

    <meta mktomodulescope="true" class="mktoNumber" id="spacer" mktoname="Spacer Height" default="10" step="1" min="0" max="100" /> 

    <meta mktomodulescope="true" class="mktoList" id="social-alignment" mktoname="Social Icons Alignment" default="right" values="center,right,left" /> 

    <meta class="mktoString" id="font-family" mktoname="Font Family" default="'Lato', Arial, sans-serif" /> 

    <!--Background Image--> 

    <meta class="mktoColor" id="SectionID-bg-color" mktoname="Section: BgColor" default="#54565A" mktomodulescope="true" /> 

    <meta class="mktoString" id="SectionID-bg-gradient-1" mktoname="Section: BgGradient 1" default="rgba(84, 86, 90, .85)" mktomodulescope="true" /> 

    <meta class="mktoString" id="SectionID-bg-gradient-2" mktoname="Section: BgGradient 2" default="rgba(84, 86, 90, .85)" mktomodulescope="true" /> 

    <meta class="mktoImg" id="SectionID-bg-image" mktoname="Section: BgImage" default="https://via.placeholder.com/640X250.png/ccc/fff" mktomodulescope="true" /> 

    <meta class="mktoImg" id="SB SectionID-bg-image" mktoname="SB Section: BgImage" default="https://go.autoshopsolutions.com/rs/180-DGD-014/images/header-background.png" mktomodulescope="true" /> 

    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" /> 

    <meta name="robots" content="noindex,nofollow" /> 

    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 

    <!--[if gte mso 9]>

<xml>

<o:OfficeDocumentSettings>

<o:AllowPNG/>

<o:PixelsPerInch>96</o:PixelsPerInch>

</o:OfficeDocumentSettings>

</xml>

<![endif]--> 

    <!--[if mso]>

<style> body,table tr,table td,a, span,table.MsoNormalTable,td,th{  font-family: helvetica, sans-serif !important;  }</style>

<![endif]--> 

    <!--[if mso]>

      <style>

         li {text-align:-webkit-match-parent; display:list-item;text-indent: -1em;}

      </style>

      <![endif]–->

      <!--[if mso]>

      <style type="text/css">

         ul {

         margin: 0 0 0 40px !important;

         }

      </style>

      <![endif]--> 

    <style media="all">

#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 */

@-ms-viewport {

width: device-width;

}

</style> 

    <style media="all">

html {

-webkit-text-size-adjust: none;

              height:100%; /*give full height to document */

        width:100%;

}




body {

font-family: helvetica, sans-serif;

              min-width: 100%;

}




p,

.undoreset div p,

.undoreset p {

margin-top: 14px;

margin-bottom: 14px;

}




img {

border: 0px !important;

}




a[x-apple-data-detectors] {

color: inherit !important;

text-decoration: none !important;

font-size: inherit !important;

font-family: inherit !important;

font-weight: inherit !important;

line-height: inherit !important;

}




a {

outline: none !important;

text-decoration: none !important;

}




.btnLine {

text-decoration: underline !important;

}




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

.main {

width: 100% !important;

min-width: 100% !important;

}




.inner_table {

width: 90% !important;

margin: 0 auto !important;

}




.res {

width: 100% !important;

display: block;

}




.center {

text-align: center !important;

margin: 0 auto;

}

.top-pad{padding-top:15px !important;}

.floatnone{float:none !important; margin:0 auto;}

}

</style> 

    <style>

        .transparentbg {

          background-size: cover;

          width: 640px;

          height: 150px;

        }

      .responsiveimg {

          width: 100%;

          height: auto;

        }

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

          .block { display: block !important; width: 100% !important; } 

        }

        </style> 

  </head> 

  <body style="margin-bottom: 0; -webkit-text-size-adjust: 100%; padding-bottom: 0;  margin-top: 0; margin-right: 0; -ms-text-size-adjust: 100%; margin-left: 0; padding-top: 0; padding-right: 0; padding-left: 0; width: 100%;"> 

    <!-- Outer table starts here --> 

    <table border="0" cellpadding="0" cellspacing="0" width="100%" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; border-spacing: 0; border-collapse: collapse;margin:0 auto;"> 

      <tbody> 

        <tr> 

          <td style="background-color:${BodyBGColor};" bgcolor="${BodyBGColor}"> 

            <table class="main" cellpadding="0" cellspacing="0" align="center" border="0" width="640" style="border-collapse: collapse; margin:0 auto;min-width:640px;"> 

              <tbody> 

                <tr> 

                  <td class="mktoContainer" id="template-wrapper" style="background-color:${BodyBGColor};" bgcolor="${BodyBGColor}">

                    <table class="mktoModule" mktoname="SB Header CTA" id="SB-Bar-CTA" width="100%" cellpadding="0" cellspacing="0" border="0" align="center" style="width: 100%;margin: 0 auto;border-spacing: 0;border-collapse: collapse;"> 

                      <tbody> 

                        <tr> 

                          <td bgcolor="${blackBGColor}" style="background-color:${blackBGColor};"> 

                            <table class="inner_table" width="600" align="center" border="0" cellpadding="0" cellspacing="0" style="width:600px;margin:0 auto;"> 

                              <tbody> 

                                <tr> 

                                  <td colspan="3" height="${top_space20}" style="line-height:1px;font-size:1px;"> &nbsp; </td> 

                                </tr> 

                                <tr> 

                                  <th align="${text-alignment}" valign="top" style="vertical-align: middle;  font-weight:normal;" class="res center"> 

                                    <div class="mktoImg" id="ImgSB1" mktoname="SB Logo" mktolockimgsize="false">

                                      <a href="https://learn.shopboss.net/boss-pay/?utm_source=Marketing Email&amp;utm_medium=PortCo Cross-Sell&amp;utm_campaign=2024_360P_XSell_Campaign_SB_MQL_Nurture&amp;utm_content=Contact Us&amp;utm_term=SBNurture&amp;cid=701VU00000BSn5xYAD" target="_blank"><img src="https://go.autoshopsolutions.com/rs/180-DGD-014/images/BossPay-alt-white.png" width="200" style="" /></a>

                                    </div> </th> 

                                  <th width="10" height="20" class="res center">&nbsp;</th> 

                                  <th valign="top" style="vertical-align:middle; font-weight:normal;" class="res center"> 

                                    <div class="mktoText" id="SBButton" mktoname="Header Button">

                                      <table align="${btn-alignment1}" border="0" cellpadding="0" cellspacing="0" style="font-family: Nimbus Sans, Arial;" class="floatnone"> 

                                        <tbody> 

                                          <tr> 

                                            <td bgcolor="${btn-bgcolor2}" style="border:1px solid ${btn-border-color2};background-color:${btn-bgcolor2};font-family:nimbus sans, arial;font-size: 14px;text-align: center; color:${btn-text-color};padding: 12px 18px;line-height:16px;display:block;font-weight:normal;" valign="top"> <a target="_blank" style="text-decoration: none;color:${btn-text-color}; outline: none; font-weight:bold;" href="${btn-cta-url}">${btn-cta-text}</a> </td> 

                                          </tr> 

                                        </tbody> 

                                      </table>

                                    </div> </th> 

                                </tr> 

                                <tr> 

                                  <td colspan="3" height="${btm_space20}" style="line-height:1px;font-size:1px;"> &nbsp; </td> 

                                </tr> 

                              </tbody> 

                            </table> </td> 

                        </tr> 

                      </tbody> 

                    </table>

                    <table class="mktoModule" mktoname="SB Header Text1" id="sb_header_text1" width="100%" cellpadding="0" cellspacing="0" border="0" align="center" style="width: 100%;margin: 0 auto;border-spacing: 0;border-collapse: collapse; background-color:#141414;"> 

                      <tbody> 

                        <tr> 

                          <td class="transparentbg" align="center" valign="top" style="vertical-align:middle;text-align:center;"> 

                            <!--<div class="mktoText" id="TransparentText4" mktoname="Text" style="color: #ffffff; font-family: Zuume, Impact; font-size: 40px; "><span class="impact">LOREM IPSUM</span></div>--> 

                            <!--<div class="mktoText" id="TransparentText5" mktoname="Text" style="color: #ffffff; font-style: italic; font-family: Zuume, Impact; font-size: 40px; "><span class="impact">DOLOR SIT AMET!</span></div>--> 

                            <div class="mktoText" id="SBHeaderText1" mktoname="SBHeaderText1" style="color: #ffffff; text-align: center; margin: 20px 50px 10px 50px; font-family: Zuume, Impact; font-size: 35px;">

                              <div>

                                 UPGRADE YOUR SHOP'S TECHNOLOGY &amp; CUSTOMER EXPERIENCE WITH BOSS PAY 

                                <br /> 

                              </div>

                            </div> </td> 

                        </tr> 

                      </tbody> 

                    </table>

                    <table class="mktoModule" mktoname="SBImageCTA" id="SBImageCTA" style="background-color:#141414;" cellpadding="0" cellspacing="0" border="0" width="100%"> 

                      <tbody> 

                        <tr> 

                          <td height="${top_space20}" style="line-height:1px;font-size:1px;"> &nbsp; </td> 

                        </tr> 

                        <tr> 

                          <td> 

                            <table class="inner_table" width="600" align="center" border="0" cellpadding="0" cellspacing="0" style="width:600px;margin:0 auto;"> 

                              <tbody> 

                                <tr> 

                                  <th class="block" width="45%" style="font-weight:normal;"> 

                                    <div class="mktoImg" mktoname="SBLeftImage" id="SBLeftImage" mktolockimgsize="true">

                                      <a href="https://learn.shopboss.net/boss-pay/?utm_source=Marketing Email&amp;utm_medium=PortCo Cross-Sell&amp;utm_campaign=2024_360P_XSell_Campaign_SB_MQL_Nurture&amp;utm_content=Contact Us&amp;utm_term=SBNurture&amp;cid=701VU00000BSn5xYAD" target="_blank"><img src="https://go.autoshopsolutions.com/rs/180-DGD-014/images/Boss Pay - Customer signing on phone with green background.png" style="" /></a>

                                    </div> </th> 

                                  <th width="5%" height="15" class="block">&nbsp;</th> 

                                  <th class="block" width="50%" style="font-weight:normal;"> 

                                    <table cellpadding="0" cellspacing="0" border="0" width="100%"> 

                                      <tbody> 

                                        <tr> 

                                          <td style="font-family: Zuume, Impact; color: #ffffff; font-size: 25px; text-align:left; line-height:34px;"> 

                                            <div class="mktoText" id="Right-Text1" mktoname="Right-Text1">

                                              <div>

                                                 SEAMLESS INTEGRATION WITH SHOP BOSS 

                                                <br /> 

                                              </div>

                                            </div> </td> 

                                        </tr> 

                                        <tr> 

                                          <td style="font-family: Nimbus Sans, Arial; color: #ffffff; font-size: 15px; text-align:left; line-height:22px;"> 

                                            <div class="mktoText" id="Right-Text2" mktoname="Right-Text2">

                                              <div>

                                                 Our fully integrated payment system ensures your reconciliations are easy and simple, eliminating the need to hunt down and match ROs and receipts. This means you can focus more on running your shop and less on administrative tasks. 

                                              </div>

                                            </div> </td> 

                                        </tr> 

                                        <tr> 

                                          <td height="15" style="line-height:1px;font-size:1px;"> &nbsp; </td> 

                                        </tr> 

                                        <tr> 

                                          <td> 

                                            <div> 

                                              <table align="${btn-alignment2}" border="0" cellpadding="0" cellspacing="0" class="mktoText floatnone" id="SBButton1" mktoname="BannerButton">

                                                <tbody> 

                                                  <tr> 

                                                    <td bgcolor="${btn-bgcolor2}" style="border:1px solid ${btn-border-color2};background-color:${btn-bgcolor2};font-family:nimbus sans, arial, sans-serif;font-size: 12px;text-align: center; color:${btn-text-color};padding: 12px 18px;line-height:16px;display:block;font-weight:normal;" valign="top"> <a target="_blank" style="text-decoration: none;color:${btn-text-color}; outline: none;font-weight:bold;" href="${btn-cta-url}">${btn-cta-text}</a> </td> 

                                                  </tr> 

                                                </tbody>

                                              </table> 

                                            </div> </td> 

                                        </tr> 

                                      </tbody> 

                                    </table> </th> 

                                </tr> 

                              </tbody> 

                            </table> </td> 

                        </tr> 

                        <tr> 

                          <td height="${btm_space10}" style="line-height:1px;font-size:1px;"> &nbsp; </td> 

                        </tr> 

                      </tbody> 

                    </table>

                    <table cellpadding="0" cellspacing="0" class="mktoModule" mktoname="SBIconText" id="SBIconText" width="100%" style="height: 100%!important; width: 100%!important; background-color: #141414;"> 

                      <tbody> 

                        <tr> 

                          <td> 

                            <table class="inner_table" width="600" align="center" border="0" cellpadding="0" cellspacing="0" style="width:600px;margin:0 auto;"> 

                              <tbody> 

                                <tr> 

                                  <td colspan="3" height="${top_space10}" style="line-height:1px;font-size:1px;"> &nbsp; </td> 

                                </tr> 

                                <tr> 

                                  <td colspan="3"> 

                                    <div class="mktoText" id="IconSB" mktoname="IconSB" style="font-family: Zuume, Impact; color: #FFFFFF; margin: 40px 0px 0px 0px; font-size: 25px;">

                                      <div>

                                         WHY BOSS PAY? 

                                      </div>

                                    </div> </td> 

                                </tr> 

                                <tr> 

                                  <td colspan="3" height="15" style="line-height:1px;font-size:1px;"> &nbsp; </td> 

                                </tr> 

                                <!--TOP ROW--> 

                                <tr valign="top"> 

                                  <th style="width:33%; font-weight:normal;" class="res"> 

                                    <!--Left Block Top--> 

                                    <table style="height: 100%!important; width: 97%; border: 1px solid #666666; border-radius: 5px;"> 

                                      <tbody> 

                                        <tr valign="top"> 

                                          <td> 

                                            <div class="mktoImg" mktoname="LeftBlockImg1" id="LeftBlockImg1" style="margin: 5px 5px 5px 5px;" mktolockimgsize="false">

                                              <img src="https://go.autoshopsolutions.com/rs/180-DGD-014/images/Boss Pay - remote payments.png" height="25" style="" width="25" />

                                            </div> 

                                            <div class="mktoText" mktoname="LeftBlockHeader1" id="LeftBlockHeader1" style="color: #FFFFFF; margin: 5px 5px 5px 5px; font-weight: bold; font-size: 17px;">

                                              <div>

                                                 Remote Payments: 

                                                <br /> 

                                              </div>

                                            </div> 

                                            <div class="mktoText" mktoname="LeftBlockText1" id="LeftBlockText1" style="color: #FFFFFF; margin: 5px 5px 5px 5px; font-size: 14px;">

                                              <div>

                                                 Allow your customers to pay from anywhere, anytime, making transactions more convenient for them and quicker for you. 

                                              </div>

                                            </div> </td> 

                                        </tr> 

                                      </tbody> 

                                    </table> 

                                    <!--Left Block Top End--> </th> 

                                  <th style="width:33%; font-weight:normal;" class="res top-pad"> 

                                    <!--Mid Block Top--> 

                                    <table style="height: 100%!important; width: 97%; border: 1px solid #666666; border-radius: 5px;"> 

                                      <tbody> 

                                        <tr valign="top"> 

                                          <td> 

                                            <div class="mktoImg" mktoname="MidBlock1" id="MidBlockImg1" style="margin: 5px 5px 5px 5px;" mktolockimgsize="false">

                                              <img src="https://go.autoshopsolutions.com/rs/180-DGD-014/images/Boss Pay - Consumer Financing.png" height="25" style="" width="25" />

                                            </div> 

                                            <div class="mktoText" mktoname="MidBlockHeader1" id="MidBlockHeader1" style="color: #FFFFFF; margin: 5px 5px 5px 5px; font-weight: bold; font-size: 17px;">

                                              <div>

                                                 Consumer Financing: 

                                                <br /> 

                                              </div>

                                            </div> 

                                            <div class="mktoText" mktoname="MidBlockText1" id="MidBlockText1" style="color: #FFFFFF; margin: 5px 5px 5px 5px; font-size: 14px;">

                                              <div>

                                                 Offer secure and private financing options directly from their phone or email, ensuring a hassle-free experience. 

                                              </div>

                                            </div> </td> 

                                        </tr> 

                                      </tbody> 

                                    </table> 

                                    <!--Mid Block Top End--> </th> 

                                  <th style="width:33%; font-weight:normal;" class="res top-pad"> 

                                    <!--Right Block Top--> 

                                    <table style="width: 97%; border: 1px solid #666666; border-radius: 5px;"> 

                                      <tbody> 

                                        <tr valign="top"> 

                                          <td> 

                                            <div class="mktoImg" mktoname="RightBlock1" id="RightBlockImg1" style="margin: 5px 5px 5px 5px;" mktolockimgsize="false">

                                              <img src="https://go.autoshopsolutions.com/rs/180-DGD-014/images/Boss Pay - Secure.png" height="25" style="" width="25" />

                                            </div> 

                                            <div class="mktoText" mktoname="RightBlockHeader1" id="RightBlockHeader1" style="color: #FFFFFF; margin: 5px 5px 5px 5px; font-weight: bold; font-size: 17px;">

                                              <div>

                                                 Top-Notch Security: 

                                                <br /> 

                                              </div>

                                            </div> 

                                            <div class="mktoText" mktoname="RightBlockText1" id="RightBlockText1" style="color: #FFFFFF; margin: 5px 5px 5px 5px; font-size: 14px;">

                                              <div>

                                                 Our platform provides robust security measures to protect every transaction, giving you and your customers peace of mind. 

                                              </div>

                                            </div> </td> 

                                        </tr> 

                                      </tbody> 

                                    </table> 

                                    <!--Right Block Top End--> </th> 

                                </tr> 

                                <tr> 

                                  <td colspan="3" height="20" style="line-height:1px;font-size:1px;"> &nbsp; </td> 

                                </tr> 

                                <!--TOP ROW END--> 

                                <!--BOTTOM ROW--> 

                                <tr valign="top"> 

                                  <th style="width:33%; font-weight:normal;" class="res"> 

                                    <!--Left Block Top--> 

                                    <table style="width: 97%; border: 1px solid #666666; border-radius: 5px;"> 

                                      <tbody> 

                                        <tr valign="top"> 

                                          <td> 

                                            <div class="mktoImg" mktoname="LeftBlockImg2" id="LeftBlockImg2" style="margin: 5px 5px 5px 5px;" mktolockimgsize="false">

                                              <img src="https://go.autoshopsolutions.com/rs/180-DGD-014/images/Boss Pay - Customer Service.png" height="25" style="" width="25" />

                                            </div> 

                                            <div class="mktoText" mktoname="LeftBlockHeader2" id="LeftBlockHeader2" style="color: #FFFFFF; margin: 5px 5px 5px 5px; font-weight: bold; font-size: 17px;">

                                              <div>

                                                 Exceptional Customer Service: 

                                                <br /> 

                                              </div>

                                            </div> 

                                            <div class="mktoText" mktoname="LeftBlockText2" id="LeftBlockText2" style="color: #FFFFFF; margin: 5px 5px 5px 5px; font-size: 14px;">

                                              <div>

                                                 Our dedicated support team is always ready to assist you, ensuring smooth operations and addressing any concerns promptly. 

                                              </div>

                                            </div> </td> 

                                        </tr> 

                                      </tbody> 

                                    </table> 

                                    <!--Left Block Top End--> </th> 

                                  <th style="width:33%; font-weight:normal;" class="res top-pad"> 

                                    <!--Mid Block Top--> 

                                    <table style="width: 97%; border: 1px solid #666666; border-radius: 5px;"> 

                                      <tbody> 

                                        <tr valign="top"> 

                                          <td> 

                                            <div class="mktoImg" mktoname="MidBlockImg2" id="MidBlockImg2" style="margin: 5px 5px 5px 5px;" mktolockimgsize="false">

                                              <img src="https://go.autoshopsolutions.com/rs/180-DGD-014/images/Boss Pay - Integration.png" height="25" style="" width="25" />

                                            </div> 

                                            <div class="mktoText" mktoname="MidBlockHeader2" id="MidBlockHeader2" style="color: #FFFFFF; margin: 5px 5px 5px 5px; font-weight: bold; font-size: 17px;">

                                              <div>

                                                 Seamless Payments Integration: 

                                                <br /> 

                                              </div>

                                            </div> 

                                            <div class="mktoText" mktoname="MidBlockText2" id="MidBlockText2" style="color: #FFFFFF; margin: 5px 5px 5px 5px; font-size: 14px;">

                                              <div>

                                                 BOSS Pay works flawlessly with your Shop Boss software, streamlining your workflow and reducing administrative overhead. 

                                              </div>

                                            </div> </td> 

                                        </tr> 

                                      </tbody> 

                                    </table> 

                                    <!--Mid Block Top End--> </th> 

                                  <th style="width:33%; font-weight:normal;" class="res top-pad"> 

                                    <!--Right Block Top--> 

                                    <table style="width: 97%; border: 1px solid #666666; border-radius: 5px;"> 

                                      <tbody> 

                                        <tr valign="top"> 

                                          <td> 

                                            <div class="mktoImg" mktoname="RightBlockImg2" id="RightBlockImg2" style="margin: 5px 5px 5px 5px;" mktolockimgsize="false">

                                              <img src="https://go.autoshopsolutions.com/rs/180-DGD-014/images/Boss Pay - Efficiency.png" height="25" style="" width="25" />

                                            </div> 

                                            <div class="mktoText" mktoname="RightBlockHeader2" id="RightBlockHeader2" style="color: #FFFFFF; margin: 5px 5px 5px 5px; font-weight: bold; font-size: 17px;">

                                              <div>

                                                 Increase Shop Efficiency: 

                                              </div>

                                            </div> 

                                            <div class="mktoText" mktoname="RightBlockText2" id="RightBlockText2" style="color: #FFFFFF; margin: 5px 5px 5px 5px; font-size: 14px;">

                                              <div>

                                                 Boost your shop’s productivity with integrated solutions that reduce administrative tasks and improve overall workflow. 

                                              </div>

                                            </div> </td> 

                                        </tr> 

                                      </tbody> 

                                    </table> 

                                    <!--Right Block Top End--> </th> 

                                </tr> 

                                <tr> 

                                  <td colspan="3" height="${btm_space20}" style="line-height:1px;font-size:1px;"> &nbsp; </td> 

                                </tr> 

                              </tbody> 

                            </table> </td> 

                        </tr> 

                        <!--BOTTOM ROW END--> 

                      </tbody> 

                    </table>

                    <table class="mktoModule" mktoname="Testimonial" id="Testimonial" width="100%" cellpadding="0" cellspacing="0" border="0" align="center" style="background-color: #FFFFFF;"> 

                      <tbody> 

                        <tr> 

                          <td> 

                            <table class="inner_table" width="600" align="center" border="0" cellpadding="0" cellspacing="0" style="width:600px;margin:0 auto;"> 

                              <tbody> 

                                <tr> 

                                  <td colspan="2" height="${top_space10}" style="line-height:1px;font-size:1px;"> &nbsp; </td> 

                                </tr> 

                                <tr> 

                                  <td style="vertical-align:top;" width="45%" valign="top" class="block"> 

                                    <!--Left Side--> 

                                    <table style="font-family: Zuume, Impact; font-size: 35px;" width="100%"> 

                                      <tbody> 

                                        <tr> 

                                          <td valign="top" style="vertical-align:top;"> 

                                            <div class="mktoImg" mktoname="SBQuoteImg" id="SBQuoteImg">

                                              <img src="https://go.autoshopsolutions.com/rs/180-DGD-014/images/quote.png" />

                                            </div> 

                                            <div class="mktoText" mktoname="SBTestimonial1" id="SBTestimonial1" style="">

                                              <div>

                                                 ONLY REGRET I HAVE 

                                                <br /> 

                                              </div>

                                            </div> 

                                            <div class="mktoText" mktoname="SBTestimonial2" id="SBTestimonial2" style="font-style: italic;">

                                              <div>

                                                 IS NOT SIGNING UP WITH THEM&nbsp;SOONER 

                                                <br /> 

                                              </div>

                                            </div> 

                                            <div class="mktoText" mktoname="SBTestimonial3" id="SBTestimonial3" style="">

                                              <div></div>

                                            </div> </td> 

                                        </tr> 

                                      </tbody> 

                                    </table> 

                                    <!--Left Side END--> </td> 

                                  <td style="vertical-align:top;" width="55%" valign="top" class="block"> 

                                    <!--Right Side--> 

                                    <table style="font-family:nimbus sans, arial;" width="100%"> 

                                      <tbody> 

                                        <tr> 

                                          <td valign="top" style="vertical-align:top;"> 

                                            <div class="mktoText" mktoname="SBTestimonial4" id="SBTestimonial4" style="font-size: 14px;">

                                              <div style="margin-right:40px;">

                                                 “I've been in business for over 20 years in the automotive industry and I've never dealt with a credit card processing company as great as 360. Most competitive rates, best customer service allows me to focus more on the business. The only regret I have is not signing up with them sooner.” 

                                                <br /> 

                                              </div>

                                            </div> 

                                            <div class="mktoText" mktoname="SBTestimonial5" id="SBTestimonial5" style="font-size: 14px; margin-top: 15px; margin-right: 40px; font-weight: bold;">

                                              <div>

                                                 GEORGE HALL 

                                                <br /> 

                                              </div>

                                            </div> 

                                            <div class="mktoText" mktoname="SBTestimonial6" id="SBTestimonial6" style="font-size: 12px; margin-right: 40px;">

                                              <div>

                                                 EXLINE AUTOMOTIVE 

                                                <br /> 

                                              </div>

                                            </div> </td> 

                                        </tr> 

                                      </tbody> 

                                    </table> 

                                    <!--Right Side END--> </td> 

                                </tr> 

                                <tr> 

                                  <td colspan="2" height="${btm_space20}" style="line-height:1px;font-size:1px;"> &nbsp; </td> 

                                </tr> 

                              </tbody> 

                            </table> </td> 

                        </tr> 

                      </tbody> 

                    </table>

                    <table cellpadding="0" cellspacing="0" class="mktoModule" mktoname="SBSideImageWithCTA" id="SBSideImageWithCTA" width="100%" style="width: 100%!important; background-color: #e6e6e6;"> 

                      <tbody> 

                        <tr> 

                          <td class="block"> 

                            <!--Left Side Image--> 

                            <table cellpadding="0" cellspacing="0"> 

                              <tbody> 

                                <tr> 

                                  <td> 

                                    <div> 

                                      <img src="https://go.autoshopsolutions.com/rs/180-DGD-014/images/content-img2.png?version=0" /> 

                                    </div> </td> 

                                </tr> 

                              </tbody> 

                            </table> 

                            <!--Left Side Image End--> </td> 

                          <!--Right Side Text and Button--> 

                          <td class="block"> 

                            <table style="width: 100%!important;"> 

                              <tbody> 

                                <tr> 

                                  <td style="font-family: Zuume, Impact; font-size: 20px; padding:20px; text-align:left;"> 

                                    <div class="mktoText" mktoname="RightSideText1" id="RightSideText1">

                                      <div> 

                                        <span style="font-size: 28px;">READY TO TRANSFORM YOUR SHOP'S CUSTOMER EXPERIENCE?</span> 

                                      </div>

                                    </div> 

                                    <div class="mktoText" mktoname="RightSideText2" id="RightSideText2" style="font-family:nimbus sans, arial; font-size: 15px;">

                                      <div>

                                         Discover how BOSS Pay can revolutionize your payment processes and elevate your customer experience. Let’s discuss how we can help you achieve your goals. 

                                      </div>

                                    </div> </td> 

                                </tr> 

                                <tr> 

                                  <td style="padding:20px;"> 

                                    <div class="mktoText" id="SBButton2" mktoname="Side Button">

                                      <table align="${btn-alignment2}" border="0" cellpadding="0" cellspacing="0"> 

                                        <tbody> 

                                          <tr> 

                                            <td bgcolor="${btn-bgcolor3}" style="border:1px solid ${btn-border-color2};background-color:${btn-bgcolor3};font-family:nimbus sans, arial, sans-serif;font-size: 14px;text-align: center; color:${btn-text-color};padding: 12px 18px;line-height:16px;display:block;font-weight:normal;" valign="top"> <a target="_blank" style="text-decoration: none;color:${btn-text-color1}; outline: none;font-weight:bold;" href="${btn-cta-url}">${btn-cta-text}</a> </td> 

                                          </tr> 

                                        </tbody> 

                                      </table>

                                    </div> </td> 

                                </tr> 

                                <tr> 

                                  <td height="${btm_space20}" style="line-height:1px;font-size:1px;"> &nbsp; </td> 

                                </tr> 

                              </tbody> 

                            </table> </td> 

                          <!--Right Side Text and Button End--> 

                        </tr> 

                      </tbody> 

                    </table>

                    <table class="mktoModule" mktoname="SBFooterBar" id="SBFooterBar" width="100%" cellpadding="0" cellspacing="0" border="0" align="center" style="width: 100%!important;margin: 0 auto;border-spacing: 0;border-collapse: collapse;"> 

                      <tbody> 

                        <tr> 

                          <td bgcolor="${blackBGColor}" style="background-color:${blackBGColor};"> 

                            <table class="inner_table" width="600" align="center" border="0" cellpadding="0" cellspacing="0" style="width:600px;margin:0 auto;"> 

                              <tbody> 

                                <tr> 

                                  <td height="${top_space20}" style="line-height:1px;font-size:1px;"> &nbsp; </td> 

                                </tr> 

                                <tr> 

                                  <td align="${text-alignment}" valign="top" style="vertical-align: middle;"> 

                                    <div class="mktoText" id="SBFooterBarPhone" mktoname="SBFooterBarPhone">

                                      <div style="color: #ffffff; font-family: nimbus, arial; font-size: 13px;">

                                         Phone Number Here 

                                        <span style="color: #dd2527;">858.252.4007</span> 

                                      </div>

                                    </div> </td> 

                                  <td valign="top" style="vertical-align:middle; align: right;"> 

                                    <div class="mktoText" id="SBFooterBarSocialIcons" mktoname="SBFooterBarSocialIcons">

                                      <table align="${btn-alignment1}" border="0" cellpadding="0" cellspacing="0" style="font-family: Nimbus Sans, Arial;"> 

                                        <tbody> 

                                          <tr> 

                                            <td valign="top"><a href="https://www.facebook.com/shopbosspro" target="_blank"><img src="https://go.autoshopsolutions.com/rs/180-DGD-014/images/Facebook_red.png" style="width: 14px;" /></a>&nbsp;&nbsp;<a href="https://www.youtube.com/@ShopBossPros" target="_blank"><img src="https://go.autoshopsolutions.com/rs/180-DGD-014/images/YouTube_red.png" style="width: 14px;" /></a>&nbsp; <a href="https://www.linkedin.com/company/csb-technologies-dba-shop-boss-pro/" target="_blank"><img src="https://go.autoshopsolutions.com/rs/180-DGD-014/images/linkedin_red.png" style="width: 12px;" height="13" /></a>&nbsp; <a href="https://www.instagram.com/shopbosspro/" target="_blank"><img src="https://go.autoshopsolutions.com/rs/180-DGD-014/images/instagram_red.png" style="width: 14px;" /></a>&nbsp;</td> 

                                          </tr> 

                                        </tbody> 

                                      </table>

                                    </div> </td> 

                                </tr> 

                                <tr> 

                                  <td height="${btm_space20}" style="line-height:1px;font-size:1px;"> &nbsp; </td> 

                                </tr> 

                              </tbody> 

                            </table> </td> 

                        </tr> 

                      </tbody> 

                    </table>

                    <table class="mktoModule" mktoname="Footer Section" id="footersectiona6d5ddef-5ed2-4ca1-9370-03a4afc8ef4c" width="100%" cellpadding="0" cellspacing="0" border="0" align="center" style="width: 100%;margin: 0 auto;border-spacing: 0;border-collapse: collapse;"> 

                      <tbody> 

                        <tr> 

                          <td bgcolor="${whiteBGColor}" style="background-color: ${whiteBGColor};"> 

                            <table class="inner_table" width="540" align="center" border="0" cellpadding="0" cellspacing="0" style="width:540px;margin:0 auto;"> 

                              <tbody> 

                                <tr> 

                                  <td height="${top_space20}" style="line-height: 1px;font-size: 1px;"> &nbsp; </td> 

                                </tr> 

                                <tr> 

                                  <td height="15" style="line-height: 1px;font-size: 1px;"> &nbsp; </td> 

                                </tr> 

                                <tr> 

                                  <td class="center" style="font-size:12px;mso-line-height-rule: exactly;line-height:15px;color:#666666;font-family: ${font-family};font-weight:400;text-align:center;"> 

                                    <div class="mktNoTrack" id="footertext1" mktoname="Text 1"> 

                                      <div>

                                         This email was sent to {{lead.Email Address}}, if you would like to unsubscribe, click 

                                        <a class="btnLine" href="https://shopboss.net/preference-center/" style="color: #666666;">here</a>. 

                                      </div> 

                                    </div> </td> 

                                </tr> 

                                <tr> 

                                  <td height="12" style="line-height: 1px;font-size: 1px;"> &nbsp; </td> 

                                </tr> 

                                <tr> 

                                  <td class="center" style="font-size:12px;mso-line-height-rule: exactly;line-height:18px;color:#666666;font-family: ${font-family};font-weight:400;text-align:center;"> 

                                    <div class="mktoText" id="footertext23e8904af-8088-48e9-a1b5-4c1de6e31ac4" mktoname="Text 2">

                                      <div>

                                         Shop Boss 

                                      </div>

                                    </div> </td> 

                                </tr> 

                                <tr> 

                                  <td class="center" style="font-size:12px;mso-line-height-rule: exactly;line-height:18px;color:#666666;font-family: ${font-family};font-weight:400;text-align:center;"> 

                                    <div class="mktoText" id="footertext347be13de-d375-4c13-9e0c-3b5901e7ad8b" mktoname="Text 3">

                                      <div>

                                         2035 Lakeside Center Way, Knoxville TN 37922 United States 

                                      </div>

                                    </div> </td> 

                                </tr> 

                                <tr> 

                                  <td height="7" style="line-height: 1px;font-size: 1px;"> &nbsp; </td> 

                                </tr> 

                                <tr> 

                                  <td style="font-size:12px;mso-line-height-rule: exactly;line-height:18px;color:#666666;font-family: ${font-family};font-weight:700;text-align:center;"> 

                                    <div class="mktoText" id="footertext4eb0a4847-b477-418f-b1dd-95832c7cf5c0" mktoname="Text 4">

                                      <div> 

                                        <a href="{{system.forwardToFriendLink}}" style="outline:none;text-decoration:none;color:#666666;">Send to a Friend</a>&nbsp;&nbsp;· 

                                        <a href="{{system.viewAsWebpageLink}}" style="outline:none;text-decoration:none;color:#666666;">View Online</a> 

                                      </div>

                                    </div> </td> 

                                </tr> 

                                <tr> 

                                  <td height="${btm_space20}" style="line-height: 1px;font-size: 1px;"> &nbsp; </td> 

                                </tr> 

                              </tbody> 

                            </table> </td> 

                        </tr> 

                      </tbody> 

                    </table></td> 

                </tr> 

              </tbody> 

            </table> </td> 

        </tr> 

      </tbody> 

    </table> 

    <!-- Outer table ends here -->  

  </body>

</html>

 

View solution in original post

4 REPLIES 4
joshmueller
Level 1

Re: Issues with iOS email rendering

Safari can struggle to render full-width elements that lack a minimum width value. Try applying the CSS property min-width to any elements you intend to display at 100% width:


width: 100%;
min-width: 600px;

Disha_Goyal6
Level 4

Re: Issues with iOS email rendering

Hi @kenmckown, I have checked and found that there were multiple issues in the coding that you shared.

Now, I have fixed the code. Please check the same in IOS.

 

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

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">

  <head> 

    <title>Email</title> 

    <meta class="mktoColor" id="BodyBGColor" mktoname="Body Background Color" default="#eff0f4" /> 

    <meta class="mktoColor" id="blue_bg_color" mktoname="Background Color" default="#132C65" mktomodulescope="true" /> 

    <meta class="mktoColor" id="grey_bg_color" mktoname="Background Color" default="#f5f5f5" mktomodulescope="true" /> 

    <meta class="mktoColor" id="dark_grey_bg_color" mktoname="Background Color" default="#54565a" mktomodulescope="true" /> 

    <meta class="mktoColor" id="black_bg_color" mktoname="Background Color" default="#000000" mktomodulescope="true" /> 

    <meta class="mktoColor" id="yellow_bg_color" mktoname="Background Color" default="#ffce01" mktomodulescope="true" /> 

    <meta class="mktoColor" id="red_bg_color" mktoname="Background Color" default="#d62029" mktomodulescope="true" /> 

    <meta mktomodulescope="true" class="mktoColor" id="whiteBGColor" mktoname="Background Color" default="#ffffff" /> 

    <meta mktomodulescope="true" class="mktoColor" id="greyBGColor" mktoname="Background Color" default="#4c4d52" /> 

    <meta mktomodulescope="true" class="mktoColor" id="redBGColor" mktoname="Background Color" default="#d62029" /> 

    <meta mktomodulescope="true" class="mktoColor" id="blackBGColor" mktoname="Background Color" default="#000000" /> 

    <meta mktomodulescope="true" class="mktoColor" id="SBblackBGColor" mktoname="Background Color" default="#141414" /> 

    <meta mktomodulescope="true" class="mktoNumber" id="top_space1" mktoname="Top Space" default="1" step="1" min="0" max="100" /> 

    <meta mktomodulescope="true" class="mktoNumber" id="top_space10" mktoname="Top Space" default="10" step="1" min="0" max="100" /> 

    <meta mktomodulescope="true" class="mktoNumber" id="top_space20" mktoname="Top Space" default="20" step="1" min="0" max="100" /> 

    <meta mktomodulescope="true" class="mktoNumber" id="btm_space1" mktoname="Bottom Space" default="1" step="1" min="0" max="100" /> 

    <meta mktomodulescope="true" class="mktoNumber" id="btm_space10" mktoname="Bottom Space" default="10" step="1" min="0" max="100" /> 

    <meta mktomodulescope="true" class="mktoNumber" id="btm_space20" mktoname="Bottom Space" default="20" step="1" min="0" max="100" /> 

    <meta mktomodulescope="true" class="mktoList" id="logo-alignment" mktoname="Logo Alignment" default="center" values="center,right,left" /> 

    <meta mktomodulescope="true" class="mktoList" id="logo-alignment-bar" mktoname="Logo Alignment" default="left" values="center,right,left" /> 

    <meta mktomodulescope="true" class="mktoList" id="text-alignment" mktoname="Text Alignment" default="left" values="center,right,left" /> 

    <meta mktomodulescope="true" class="mktoColor" id="btn-bgcolor" mktoname="Button BG Color" default="#d62029" /> 

    <meta mktomodulescope="true" class="mktoColor" id="btn-bgcolor1" mktoname="Button BG Color" default="#f0f0f0" /> 

    <meta mktomodulescope="true" class="mktoColor" id="btn-bgcolor2" mktoname="Button BG Color" default="#000000" /> 

    <meta mktomodulescope="true" class="mktoColor" id="btn-bgcolor3" mktoname="Button BG Color" default="#E6E6E6" /> 

    <meta mktomodulescope="true" class="mktoColor" id="btn-border-color" mktoname="Button Border Color" default="#d62029" /> 

    <meta mktomodulescope="true" class="mktoColor" id="btn-border-color1" mktoname="Button Border Color" default="#f0f0f0" /> 

    <meta mktomodulescope="true" class="mktoColor" id="btn-border-color2" mktoname="Button Border Color" default="#dd2527" /> 

    <meta mktomodulescope="true" class="mktoColor" id="btn-text-color" mktoname="Button Text Color" default="#ffffff" /> 

    <meta mktomodulescope="true" class="mktoColor" id="btn-text-color1" mktoname="Button Text Color" default="#666666" /> 

    <meta mktomodulescope="true" class="mktoColor" id="btn-text-color2" mktoname="Button Text Color" default="#000000" /> 

    <meta mktomodulescope="true" class="mktoString" id="btn-cta-url" mktoname="Button Url" default="#" /> 

    <meta mktomodulescope="true" class="mktoString" id="btn-cta-text" mktoname="Button Text" default="Lorem ipsum dolor sit" /> 

    <meta mktomodulescope="true" class="mktoList" id="btn-alignment" mktoname="Button Alignment" default="center" values="center,right,left" /> 

    <meta mktomodulescope="true" class="mktoList" id="btn-alignment1" mktoname="Button Alignment" default="right" values="center,right,left" /> 

    <meta mktomodulescope="true" class="mktoList" id="btn-alignment2" mktoname="Button Alignment" default="left" values="center,right,left" /> 

    <meta mktomodulescope="true" class="mktoColor" id="border-bgcolor" mktoname="Border Color" default="#cac9cf" /> 

    <meta mktomodulescope="true" class="mktoList" id="border-alignment" mktoname="Border Alignment" default="center" values="left,center,right" /> 

    <meta mktomodulescope="true" class="mktoNumber" id="border-width" mktoname="Border Width(in %)" default="100" step="1" min="0" max="100" /> 

    <meta mktomodulescope="true" class="mktoNumber" id="border-height" mktoname="Border Height" default="1" step="1" min="0" max="100" /> 

    <meta mktomodulescope="true" class="mktoNumber" id="spacer" mktoname="Spacer Height" default="10" step="1" min="0" max="100" /> 

    <meta mktomodulescope="true" class="mktoList" id="social-alignment" mktoname="Social Icons Alignment" default="right" values="center,right,left" /> 

    <meta class="mktoString" id="font-family" mktoname="Font Family" default="'Lato', Arial, sans-serif" /> 

    <!--Background Image--> 

    <meta class="mktoColor" id="SectionID-bg-color" mktoname="Section: BgColor" default="#54565A" mktomodulescope="true" /> 

    <meta class="mktoString" id="SectionID-bg-gradient-1" mktoname="Section: BgGradient 1" default="rgba(84, 86, 90, .85)" mktomodulescope="true" /> 

    <meta class="mktoString" id="SectionID-bg-gradient-2" mktoname="Section: BgGradient 2" default="rgba(84, 86, 90, .85)" mktomodulescope="true" /> 

    <meta class="mktoImg" id="SectionID-bg-image" mktoname="Section: BgImage" default="https://via.placeholder.com/640X250.png/ccc/fff" mktomodulescope="true" /> 

    <meta class="mktoImg" id="SB SectionID-bg-image" mktoname="SB Section: BgImage" default="https://go.autoshopsolutions.com/rs/180-DGD-014/images/header-background.png" mktomodulescope="true" /> 

    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" /> 

    <meta name="robots" content="noindex,nofollow" /> 

    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 

    <!--[if gte mso 9]>

<xml>

<o:OfficeDocumentSettings>

<o:AllowPNG/>

<o:PixelsPerInch>96</o:PixelsPerInch>

</o:OfficeDocumentSettings>

</xml>

<![endif]--> 

    <!--[if mso]>

<style> body,table tr,table td,a, span,table.MsoNormalTable,td,th{  font-family: helvetica, sans-serif !important;  }</style>

<![endif]--> 

    <!--[if mso]>

      <style>

         li {text-align:-webkit-match-parent; display:list-item;text-indent: -1em;}

      </style>

      <![endif]–->

      <!--[if mso]>

      <style type="text/css">

         ul {

         margin: 0 0 0 40px !important;

         }

      </style>

      <![endif]--> 

    <style media="all">

#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 */

@-ms-viewport {

width: device-width;

}

</style> 

    <style media="all">

html {

-webkit-text-size-adjust: none;

              height:100%; /*give full height to document */

        width:100%;

}




body {

font-family: helvetica, sans-serif;

              min-width: 100%;

}




p,

.undoreset div p,

.undoreset p {

margin-top: 14px;

margin-bottom: 14px;

}




img {

border: 0px !important;

}




a[x-apple-data-detectors] {

color: inherit !important;

text-decoration: none !important;

font-size: inherit !important;

font-family: inherit !important;

font-weight: inherit !important;

line-height: inherit !important;

}




a {

outline: none !important;

text-decoration: none !important;

}




.btnLine {

text-decoration: underline !important;

}




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

.main {

width: 100% !important;

min-width: 100% !important;

}




.inner_table {

width: 90% !important;

margin: 0 auto !important;

}




.res {

width: 100% !important;

display: block;

}




.center {

text-align: center !important;

margin: 0 auto;

}

.top-pad{padding-top:15px !important;}

.floatnone{float:none !important; margin:0 auto;}

}

</style> 

    <style>

        .transparentbg {

          background-size: cover;

          width: 640px;

          height: 150px;

        }

      .responsiveimg {

          width: 100%;

          height: auto;

        }

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

          .block { display: block !important; width: 100% !important; } 

        }

        </style> 

  </head> 

  <body style="margin-bottom: 0; -webkit-text-size-adjust: 100%; padding-bottom: 0;  margin-top: 0; margin-right: 0; -ms-text-size-adjust: 100%; margin-left: 0; padding-top: 0; padding-right: 0; padding-left: 0; width: 100%;"> 

    <!-- Outer table starts here --> 

    <table border="0" cellpadding="0" cellspacing="0" width="100%" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; border-spacing: 0; border-collapse: collapse;margin:0 auto;"> 

      <tbody> 

        <tr> 

          <td style="background-color:${BodyBGColor};" bgcolor="${BodyBGColor}"> 

            <table class="main" cellpadding="0" cellspacing="0" align="center" border="0" width="640" style="border-collapse: collapse; margin:0 auto;min-width:640px;"> 

              <tbody> 

                <tr> 

                  <td class="mktoContainer" id="template-wrapper" style="background-color:${BodyBGColor};" bgcolor="${BodyBGColor}">

                    <table class="mktoModule" mktoname="SB Header CTA" id="SB-Bar-CTA" width="100%" cellpadding="0" cellspacing="0" border="0" align="center" style="width: 100%;margin: 0 auto;border-spacing: 0;border-collapse: collapse;"> 

                      <tbody> 

                        <tr> 

                          <td bgcolor="${blackBGColor}" style="background-color:${blackBGColor};"> 

                            <table class="inner_table" width="600" align="center" border="0" cellpadding="0" cellspacing="0" style="width:600px;margin:0 auto;"> 

                              <tbody> 

                                <tr> 

                                  <td colspan="3" height="${top_space20}" style="line-height:1px;font-size:1px;"> &nbsp; </td> 

                                </tr> 

                                <tr> 

                                  <th align="${text-alignment}" valign="top" style="vertical-align: middle;  font-weight:normal;" class="res center"> 

                                    <div class="mktoImg" id="ImgSB1" mktoname="SB Logo" mktolockimgsize="false">

                                      <a href="https://learn.shopboss.net/boss-pay/?utm_source=Marketing Email&amp;utm_medium=PortCo Cross-Sell&amp;utm_campaign=2024_360P_XSell_Campaign_SB_MQL_Nurture&amp;utm_content=Contact Us&amp;utm_term=SBNurture&amp;cid=701VU00000BSn5xYAD" target="_blank"><img src="https://go.autoshopsolutions.com/rs/180-DGD-014/images/BossPay-alt-white.png" width="200" style="" /></a>

                                    </div> </th> 

                                  <th width="10" height="20" class="res center">&nbsp;</th> 

                                  <th valign="top" style="vertical-align:middle; font-weight:normal;" class="res center"> 

                                    <div class="mktoText" id="SBButton" mktoname="Header Button">

                                      <table align="${btn-alignment1}" border="0" cellpadding="0" cellspacing="0" style="font-family: Nimbus Sans, Arial;" class="floatnone"> 

                                        <tbody> 

                                          <tr> 

                                            <td bgcolor="${btn-bgcolor2}" style="border:1px solid ${btn-border-color2};background-color:${btn-bgcolor2};font-family:nimbus sans, arial;font-size: 14px;text-align: center; color:${btn-text-color};padding: 12px 18px;line-height:16px;display:block;font-weight:normal;" valign="top"> <a target="_blank" style="text-decoration: none;color:${btn-text-color}; outline: none; font-weight:bold;" href="${btn-cta-url}">${btn-cta-text}</a> </td> 

                                          </tr> 

                                        </tbody> 

                                      </table>

                                    </div> </th> 

                                </tr> 

                                <tr> 

                                  <td colspan="3" height="${btm_space20}" style="line-height:1px;font-size:1px;"> &nbsp; </td> 

                                </tr> 

                              </tbody> 

                            </table> </td> 

                        </tr> 

                      </tbody> 

                    </table>

                    <table class="mktoModule" mktoname="SB Header Text1" id="sb_header_text1" width="100%" cellpadding="0" cellspacing="0" border="0" align="center" style="width: 100%;margin: 0 auto;border-spacing: 0;border-collapse: collapse; background-color:#141414;"> 

                      <tbody> 

                        <tr> 

                          <td class="transparentbg" align="center" valign="top" style="vertical-align:middle;text-align:center;"> 

                            <!--<div class="mktoText" id="TransparentText4" mktoname="Text" style="color: #ffffff; font-family: Zuume, Impact; font-size: 40px; "><span class="impact">LOREM IPSUM</span></div>--> 

                            <!--<div class="mktoText" id="TransparentText5" mktoname="Text" style="color: #ffffff; font-style: italic; font-family: Zuume, Impact; font-size: 40px; "><span class="impact">DOLOR SIT AMET!</span></div>--> 

                            <div class="mktoText" id="SBHeaderText1" mktoname="SBHeaderText1" style="color: #ffffff; text-align: center; margin: 20px 50px 10px 50px; font-family: Zuume, Impact; font-size: 35px;">

                              <div>

                                 UPGRADE YOUR SHOP'S TECHNOLOGY &amp; CUSTOMER EXPERIENCE WITH BOSS PAY 

                                <br /> 

                              </div>

                            </div> </td> 

                        </tr> 

                      </tbody> 

                    </table>

                    <table class="mktoModule" mktoname="SBImageCTA" id="SBImageCTA" style="background-color:#141414;" cellpadding="0" cellspacing="0" border="0" width="100%"> 

                      <tbody> 

                        <tr> 

                          <td height="${top_space20}" style="line-height:1px;font-size:1px;"> &nbsp; </td> 

                        </tr> 

                        <tr> 

                          <td> 

                            <table class="inner_table" width="600" align="center" border="0" cellpadding="0" cellspacing="0" style="width:600px;margin:0 auto;"> 

                              <tbody> 

                                <tr> 

                                  <th class="block" width="45%" style="font-weight:normal;"> 

                                    <div class="mktoImg" mktoname="SBLeftImage" id="SBLeftImage" mktolockimgsize="true">

                                      <a href="https://learn.shopboss.net/boss-pay/?utm_source=Marketing Email&amp;utm_medium=PortCo Cross-Sell&amp;utm_campaign=2024_360P_XSell_Campaign_SB_MQL_Nurture&amp;utm_content=Contact Us&amp;utm_term=SBNurture&amp;cid=701VU00000BSn5xYAD" target="_blank"><img src="https://go.autoshopsolutions.com/rs/180-DGD-014/images/Boss Pay - Customer signing on phone with green background.png" style="" /></a>

                                    </div> </th> 

                                  <th width="5%" height="15" class="block">&nbsp;</th> 

                                  <th class="block" width="50%" style="font-weight:normal;"> 

                                    <table cellpadding="0" cellspacing="0" border="0" width="100%"> 

                                      <tbody> 

                                        <tr> 

                                          <td style="font-family: Zuume, Impact; color: #ffffff; font-size: 25px; text-align:left; line-height:34px;"> 

                                            <div class="mktoText" id="Right-Text1" mktoname="Right-Text1">

                                              <div>

                                                 SEAMLESS INTEGRATION WITH SHOP BOSS 

                                                <br /> 

                                              </div>

                                            </div> </td> 

                                        </tr> 

                                        <tr> 

                                          <td style="font-family: Nimbus Sans, Arial; color: #ffffff; font-size: 15px; text-align:left; line-height:22px;"> 

                                            <div class="mktoText" id="Right-Text2" mktoname="Right-Text2">

                                              <div>

                                                 Our fully integrated payment system ensures your reconciliations are easy and simple, eliminating the need to hunt down and match ROs and receipts. This means you can focus more on running your shop and less on administrative tasks. 

                                              </div>

                                            </div> </td> 

                                        </tr> 

                                        <tr> 

                                          <td height="15" style="line-height:1px;font-size:1px;"> &nbsp; </td> 

                                        </tr> 

                                        <tr> 

                                          <td> 

                                            <div> 

                                              <table align="${btn-alignment2}" border="0" cellpadding="0" cellspacing="0" class="mktoText floatnone" id="SBButton1" mktoname="BannerButton">

                                                <tbody> 

                                                  <tr> 

                                                    <td bgcolor="${btn-bgcolor2}" style="border:1px solid ${btn-border-color2};background-color:${btn-bgcolor2};font-family:nimbus sans, arial, sans-serif;font-size: 12px;text-align: center; color:${btn-text-color};padding: 12px 18px;line-height:16px;display:block;font-weight:normal;" valign="top"> <a target="_blank" style="text-decoration: none;color:${btn-text-color}; outline: none;font-weight:bold;" href="${btn-cta-url}">${btn-cta-text}</a> </td> 

                                                  </tr> 

                                                </tbody>

                                              </table> 

                                            </div> </td> 

                                        </tr> 

                                      </tbody> 

                                    </table> </th> 

                                </tr> 

                              </tbody> 

                            </table> </td> 

                        </tr> 

                        <tr> 

                          <td height="${btm_space10}" style="line-height:1px;font-size:1px;"> &nbsp; </td> 

                        </tr> 

                      </tbody> 

                    </table>

                    <table cellpadding="0" cellspacing="0" class="mktoModule" mktoname="SBIconText" id="SBIconText" width="100%" style="height: 100%!important; width: 100%!important; background-color: #141414;"> 

                      <tbody> 

                        <tr> 

                          <td> 

                            <table class="inner_table" width="600" align="center" border="0" cellpadding="0" cellspacing="0" style="width:600px;margin:0 auto;"> 

                              <tbody> 

                                <tr> 

                                  <td colspan="3" height="${top_space10}" style="line-height:1px;font-size:1px;"> &nbsp; </td> 

                                </tr> 

                                <tr> 

                                  <td colspan="3"> 

                                    <div class="mktoText" id="IconSB" mktoname="IconSB" style="font-family: Zuume, Impact; color: #FFFFFF; margin: 40px 0px 0px 0px; font-size: 25px;">

                                      <div>

                                         WHY BOSS PAY? 

                                      </div>

                                    </div> </td> 

                                </tr> 

                                <tr> 

                                  <td colspan="3" height="15" style="line-height:1px;font-size:1px;"> &nbsp; </td> 

                                </tr> 

                                <!--TOP ROW--> 

                                <tr valign="top"> 

                                  <th style="width:33%; font-weight:normal;" class="res"> 

                                    <!--Left Block Top--> 

                                    <table style="height: 100%!important; width: 97%; border: 1px solid #666666; border-radius: 5px;"> 

                                      <tbody> 

                                        <tr valign="top"> 

                                          <td> 

                                            <div class="mktoImg" mktoname="LeftBlockImg1" id="LeftBlockImg1" style="margin: 5px 5px 5px 5px;" mktolockimgsize="false">

                                              <img src="https://go.autoshopsolutions.com/rs/180-DGD-014/images/Boss Pay - remote payments.png" height="25" style="" width="25" />

                                            </div> 

                                            <div class="mktoText" mktoname="LeftBlockHeader1" id="LeftBlockHeader1" style="color: #FFFFFF; margin: 5px 5px 5px 5px; font-weight: bold; font-size: 17px;">

                                              <div>

                                                 Remote Payments: 

                                                <br /> 

                                              </div>

                                            </div> 

                                            <div class="mktoText" mktoname="LeftBlockText1" id="LeftBlockText1" style="color: #FFFFFF; margin: 5px 5px 5px 5px; font-size: 14px;">

                                              <div>

                                                 Allow your customers to pay from anywhere, anytime, making transactions more convenient for them and quicker for you. 

                                              </div>

                                            </div> </td> 

                                        </tr> 

                                      </tbody> 

                                    </table> 

                                    <!--Left Block Top End--> </th> 

                                  <th style="width:33%; font-weight:normal;" class="res top-pad"> 

                                    <!--Mid Block Top--> 

                                    <table style="height: 100%!important; width: 97%; border: 1px solid #666666; border-radius: 5px;"> 

                                      <tbody> 

                                        <tr valign="top"> 

                                          <td> 

                                            <div class="mktoImg" mktoname="MidBlock1" id="MidBlockImg1" style="margin: 5px 5px 5px 5px;" mktolockimgsize="false">

                                              <img src="https://go.autoshopsolutions.com/rs/180-DGD-014/images/Boss Pay - Consumer Financing.png" height="25" style="" width="25" />

                                            </div> 

                                            <div class="mktoText" mktoname="MidBlockHeader1" id="MidBlockHeader1" style="color: #FFFFFF; margin: 5px 5px 5px 5px; font-weight: bold; font-size: 17px;">

                                              <div>

                                                 Consumer Financing: 

                                                <br /> 

                                              </div>

                                            </div> 

                                            <div class="mktoText" mktoname="MidBlockText1" id="MidBlockText1" style="color: #FFFFFF; margin: 5px 5px 5px 5px; font-size: 14px;">

                                              <div>

                                                 Offer secure and private financing options directly from their phone or email, ensuring a hassle-free experience. 

                                              </div>

                                            </div> </td> 

                                        </tr> 

                                      </tbody> 

                                    </table> 

                                    <!--Mid Block Top End--> </th> 

                                  <th style="width:33%; font-weight:normal;" class="res top-pad"> 

                                    <!--Right Block Top--> 

                                    <table style="width: 97%; border: 1px solid #666666; border-radius: 5px;"> 

                                      <tbody> 

                                        <tr valign="top"> 

                                          <td> 

                                            <div class="mktoImg" mktoname="RightBlock1" id="RightBlockImg1" style="margin: 5px 5px 5px 5px;" mktolockimgsize="false">

                                              <img src="https://go.autoshopsolutions.com/rs/180-DGD-014/images/Boss Pay - Secure.png" height="25" style="" width="25" />

                                            </div> 

                                            <div class="mktoText" mktoname="RightBlockHeader1" id="RightBlockHeader1" style="color: #FFFFFF; margin: 5px 5px 5px 5px; font-weight: bold; font-size: 17px;">

                                              <div>

                                                 Top-Notch Security: 

                                                <br /> 

                                              </div>

                                            </div> 

                                            <div class="mktoText" mktoname="RightBlockText1" id="RightBlockText1" style="color: #FFFFFF; margin: 5px 5px 5px 5px; font-size: 14px;">

                                              <div>

                                                 Our platform provides robust security measures to protect every transaction, giving you and your customers peace of mind. 

                                              </div>

                                            </div> </td> 

                                        </tr> 

                                      </tbody> 

                                    </table> 

                                    <!--Right Block Top End--> </th> 

                                </tr> 

                                <tr> 

                                  <td colspan="3" height="20" style="line-height:1px;font-size:1px;"> &nbsp; </td> 

                                </tr> 

                                <!--TOP ROW END--> 

                                <!--BOTTOM ROW--> 

                                <tr valign="top"> 

                                  <th style="width:33%; font-weight:normal;" class="res"> 

                                    <!--Left Block Top--> 

                                    <table style="width: 97%; border: 1px solid #666666; border-radius: 5px;"> 

                                      <tbody> 

                                        <tr valign="top"> 

                                          <td> 

                                            <div class="mktoImg" mktoname="LeftBlockImg2" id="LeftBlockImg2" style="margin: 5px 5px 5px 5px;" mktolockimgsize="false">

                                              <img src="https://go.autoshopsolutions.com/rs/180-DGD-014/images/Boss Pay - Customer Service.png" height="25" style="" width="25" />

                                            </div> 

                                            <div class="mktoText" mktoname="LeftBlockHeader2" id="LeftBlockHeader2" style="color: #FFFFFF; margin: 5px 5px 5px 5px; font-weight: bold; font-size: 17px;">

                                              <div>

                                                 Exceptional Customer Service: 

                                                <br /> 

                                              </div>

                                            </div> 

                                            <div class="mktoText" mktoname="LeftBlockText2" id="LeftBlockText2" style="color: #FFFFFF; margin: 5px 5px 5px 5px; font-size: 14px;">

                                              <div>

                                                 Our dedicated support team is always ready to assist you, ensuring smooth operations and addressing any concerns promptly. 

                                              </div>

                                            </div> </td> 

                                        </tr> 

                                      </tbody> 

                                    </table> 

                                    <!--Left Block Top End--> </th> 

                                  <th style="width:33%; font-weight:normal;" class="res top-pad"> 

                                    <!--Mid Block Top--> 

                                    <table style="width: 97%; border: 1px solid #666666; border-radius: 5px;"> 

                                      <tbody> 

                                        <tr valign="top"> 

                                          <td> 

                                            <div class="mktoImg" mktoname="MidBlockImg2" id="MidBlockImg2" style="margin: 5px 5px 5px 5px;" mktolockimgsize="false">

                                              <img src="https://go.autoshopsolutions.com/rs/180-DGD-014/images/Boss Pay - Integration.png" height="25" style="" width="25" />

                                            </div> 

                                            <div class="mktoText" mktoname="MidBlockHeader2" id="MidBlockHeader2" style="color: #FFFFFF; margin: 5px 5px 5px 5px; font-weight: bold; font-size: 17px;">

                                              <div>

                                                 Seamless Payments Integration: 

                                                <br /> 

                                              </div>

                                            </div> 

                                            <div class="mktoText" mktoname="MidBlockText2" id="MidBlockText2" style="color: #FFFFFF; margin: 5px 5px 5px 5px; font-size: 14px;">

                                              <div>

                                                 BOSS Pay works flawlessly with your Shop Boss software, streamlining your workflow and reducing administrative overhead. 

                                              </div>

                                            </div> </td> 

                                        </tr> 

                                      </tbody> 

                                    </table> 

                                    <!--Mid Block Top End--> </th> 

                                  <th style="width:33%; font-weight:normal;" class="res top-pad"> 

                                    <!--Right Block Top--> 

                                    <table style="width: 97%; border: 1px solid #666666; border-radius: 5px;"> 

                                      <tbody> 

                                        <tr valign="top"> 

                                          <td> 

                                            <div class="mktoImg" mktoname="RightBlockImg2" id="RightBlockImg2" style="margin: 5px 5px 5px 5px;" mktolockimgsize="false">

                                              <img src="https://go.autoshopsolutions.com/rs/180-DGD-014/images/Boss Pay - Efficiency.png" height="25" style="" width="25" />

                                            </div> 

                                            <div class="mktoText" mktoname="RightBlockHeader2" id="RightBlockHeader2" style="color: #FFFFFF; margin: 5px 5px 5px 5px; font-weight: bold; font-size: 17px;">

                                              <div>

                                                 Increase Shop Efficiency: 

                                              </div>

                                            </div> 

                                            <div class="mktoText" mktoname="RightBlockText2" id="RightBlockText2" style="color: #FFFFFF; margin: 5px 5px 5px 5px; font-size: 14px;">

                                              <div>

                                                 Boost your shop’s productivity with integrated solutions that reduce administrative tasks and improve overall workflow. 

                                              </div>

                                            </div> </td> 

                                        </tr> 

                                      </tbody> 

                                    </table> 

                                    <!--Right Block Top End--> </th> 

                                </tr> 

                                <tr> 

                                  <td colspan="3" height="${btm_space20}" style="line-height:1px;font-size:1px;"> &nbsp; </td> 

                                </tr> 

                              </tbody> 

                            </table> </td> 

                        </tr> 

                        <!--BOTTOM ROW END--> 

                      </tbody> 

                    </table>

                    <table class="mktoModule" mktoname="Testimonial" id="Testimonial" width="100%" cellpadding="0" cellspacing="0" border="0" align="center" style="background-color: #FFFFFF;"> 

                      <tbody> 

                        <tr> 

                          <td> 

                            <table class="inner_table" width="600" align="center" border="0" cellpadding="0" cellspacing="0" style="width:600px;margin:0 auto;"> 

                              <tbody> 

                                <tr> 

                                  <td colspan="2" height="${top_space10}" style="line-height:1px;font-size:1px;"> &nbsp; </td> 

                                </tr> 

                                <tr> 

                                  <td style="vertical-align:top;" width="45%" valign="top" class="block"> 

                                    <!--Left Side--> 

                                    <table style="font-family: Zuume, Impact; font-size: 35px;" width="100%"> 

                                      <tbody> 

                                        <tr> 

                                          <td valign="top" style="vertical-align:top;"> 

                                            <div class="mktoImg" mktoname="SBQuoteImg" id="SBQuoteImg">

                                              <img src="https://go.autoshopsolutions.com/rs/180-DGD-014/images/quote.png" />

                                            </div> 

                                            <div class="mktoText" mktoname="SBTestimonial1" id="SBTestimonial1" style="">

                                              <div>

                                                 ONLY REGRET I HAVE 

                                                <br /> 

                                              </div>

                                            </div> 

                                            <div class="mktoText" mktoname="SBTestimonial2" id="SBTestimonial2" style="font-style: italic;">

                                              <div>

                                                 IS NOT SIGNING UP WITH THEM&nbsp;SOONER 

                                                <br /> 

                                              </div>

                                            </div> 

                                            <div class="mktoText" mktoname="SBTestimonial3" id="SBTestimonial3" style="">

                                              <div></div>

                                            </div> </td> 

                                        </tr> 

                                      </tbody> 

                                    </table> 

                                    <!--Left Side END--> </td> 

                                  <td style="vertical-align:top;" width="55%" valign="top" class="block"> 

                                    <!--Right Side--> 

                                    <table style="font-family:nimbus sans, arial;" width="100%"> 

                                      <tbody> 

                                        <tr> 

                                          <td valign="top" style="vertical-align:top;"> 

                                            <div class="mktoText" mktoname="SBTestimonial4" id="SBTestimonial4" style="font-size: 14px;">

                                              <div style="margin-right:40px;">

                                                 “I've been in business for over 20 years in the automotive industry and I've never dealt with a credit card processing company as great as 360. Most competitive rates, best customer service allows me to focus more on the business. The only regret I have is not signing up with them sooner.” 

                                                <br /> 

                                              </div>

                                            </div> 

                                            <div class="mktoText" mktoname="SBTestimonial5" id="SBTestimonial5" style="font-size: 14px; margin-top: 15px; margin-right: 40px; font-weight: bold;">

                                              <div>

                                                 GEORGE HALL 

                                                <br /> 

                                              </div>

                                            </div> 

                                            <div class="mktoText" mktoname="SBTestimonial6" id="SBTestimonial6" style="font-size: 12px; margin-right: 40px;">

                                              <div>

                                                 EXLINE AUTOMOTIVE 

                                                <br /> 

                                              </div>

                                            </div> </td> 

                                        </tr> 

                                      </tbody> 

                                    </table> 

                                    <!--Right Side END--> </td> 

                                </tr> 

                                <tr> 

                                  <td colspan="2" height="${btm_space20}" style="line-height:1px;font-size:1px;"> &nbsp; </td> 

                                </tr> 

                              </tbody> 

                            </table> </td> 

                        </tr> 

                      </tbody> 

                    </table>

                    <table cellpadding="0" cellspacing="0" class="mktoModule" mktoname="SBSideImageWithCTA" id="SBSideImageWithCTA" width="100%" style="width: 100%!important; background-color: #e6e6e6;"> 

                      <tbody> 

                        <tr> 

                          <td class="block"> 

                            <!--Left Side Image--> 

                            <table cellpadding="0" cellspacing="0"> 

                              <tbody> 

                                <tr> 

                                  <td> 

                                    <div> 

                                      <img src="https://go.autoshopsolutions.com/rs/180-DGD-014/images/content-img2.png?version=0" /> 

                                    </div> </td> 

                                </tr> 

                              </tbody> 

                            </table> 

                            <!--Left Side Image End--> </td> 

                          <!--Right Side Text and Button--> 

                          <td class="block"> 

                            <table style="width: 100%!important;"> 

                              <tbody> 

                                <tr> 

                                  <td style="font-family: Zuume, Impact; font-size: 20px; padding:20px; text-align:left;"> 

                                    <div class="mktoText" mktoname="RightSideText1" id="RightSideText1">

                                      <div> 

                                        <span style="font-size: 28px;">READY TO TRANSFORM YOUR SHOP'S CUSTOMER EXPERIENCE?</span> 

                                      </div>

                                    </div> 

                                    <div class="mktoText" mktoname="RightSideText2" id="RightSideText2" style="font-family:nimbus sans, arial; font-size: 15px;">

                                      <div>

                                         Discover how BOSS Pay can revolutionize your payment processes and elevate your customer experience. Let’s discuss how we can help you achieve your goals. 

                                      </div>

                                    </div> </td> 

                                </tr> 

                                <tr> 

                                  <td style="padding:20px;"> 

                                    <div class="mktoText" id="SBButton2" mktoname="Side Button">

                                      <table align="${btn-alignment2}" border="0" cellpadding="0" cellspacing="0"> 

                                        <tbody> 

                                          <tr> 

                                            <td bgcolor="${btn-bgcolor3}" style="border:1px solid ${btn-border-color2};background-color:${btn-bgcolor3};font-family:nimbus sans, arial, sans-serif;font-size: 14px;text-align: center; color:${btn-text-color};padding: 12px 18px;line-height:16px;display:block;font-weight:normal;" valign="top"> <a target="_blank" style="text-decoration: none;color:${btn-text-color1}; outline: none;font-weight:bold;" href="${btn-cta-url}">${btn-cta-text}</a> </td> 

                                          </tr> 

                                        </tbody> 

                                      </table>

                                    </div> </td> 

                                </tr> 

                                <tr> 

                                  <td height="${btm_space20}" style="line-height:1px;font-size:1px;"> &nbsp; </td> 

                                </tr> 

                              </tbody> 

                            </table> </td> 

                          <!--Right Side Text and Button End--> 

                        </tr> 

                      </tbody> 

                    </table>

                    <table class="mktoModule" mktoname="SBFooterBar" id="SBFooterBar" width="100%" cellpadding="0" cellspacing="0" border="0" align="center" style="width: 100%!important;margin: 0 auto;border-spacing: 0;border-collapse: collapse;"> 

                      <tbody> 

                        <tr> 

                          <td bgcolor="${blackBGColor}" style="background-color:${blackBGColor};"> 

                            <table class="inner_table" width="600" align="center" border="0" cellpadding="0" cellspacing="0" style="width:600px;margin:0 auto;"> 

                              <tbody> 

                                <tr> 

                                  <td height="${top_space20}" style="line-height:1px;font-size:1px;"> &nbsp; </td> 

                                </tr> 

                                <tr> 

                                  <td align="${text-alignment}" valign="top" style="vertical-align: middle;"> 

                                    <div class="mktoText" id="SBFooterBarPhone" mktoname="SBFooterBarPhone">

                                      <div style="color: #ffffff; font-family: nimbus, arial; font-size: 13px;">

                                         Phone Number Here 

                                        <span style="color: #dd2527;">858.252.4007</span> 

                                      </div>

                                    </div> </td> 

                                  <td valign="top" style="vertical-align:middle; align: right;"> 

                                    <div class="mktoText" id="SBFooterBarSocialIcons" mktoname="SBFooterBarSocialIcons">

                                      <table align="${btn-alignment1}" border="0" cellpadding="0" cellspacing="0" style="font-family: Nimbus Sans, Arial;"> 

                                        <tbody> 

                                          <tr> 

                                            <td valign="top"><a href="https://www.facebook.com/shopbosspro" target="_blank"><img src="https://go.autoshopsolutions.com/rs/180-DGD-014/images/Facebook_red.png" style="width: 14px;" /></a>&nbsp;&nbsp;<a href="https://www.youtube.com/@ShopBossPros" target="_blank"><img src="https://go.autoshopsolutions.com/rs/180-DGD-014/images/YouTube_red.png" style="width: 14px;" /></a>&nbsp; <a href="https://www.linkedin.com/company/csb-technologies-dba-shop-boss-pro/" target="_blank"><img src="https://go.autoshopsolutions.com/rs/180-DGD-014/images/linkedin_red.png" style="width: 12px;" height="13" /></a>&nbsp; <a href="https://www.instagram.com/shopbosspro/" target="_blank"><img src="https://go.autoshopsolutions.com/rs/180-DGD-014/images/instagram_red.png" style="width: 14px;" /></a>&nbsp;</td> 

                                          </tr> 

                                        </tbody> 

                                      </table>

                                    </div> </td> 

                                </tr> 

                                <tr> 

                                  <td height="${btm_space20}" style="line-height:1px;font-size:1px;"> &nbsp; </td> 

                                </tr> 

                              </tbody> 

                            </table> </td> 

                        </tr> 

                      </tbody> 

                    </table>

                    <table class="mktoModule" mktoname="Footer Section" id="footersectiona6d5ddef-5ed2-4ca1-9370-03a4afc8ef4c" width="100%" cellpadding="0" cellspacing="0" border="0" align="center" style="width: 100%;margin: 0 auto;border-spacing: 0;border-collapse: collapse;"> 

                      <tbody> 

                        <tr> 

                          <td bgcolor="${whiteBGColor}" style="background-color: ${whiteBGColor};"> 

                            <table class="inner_table" width="540" align="center" border="0" cellpadding="0" cellspacing="0" style="width:540px;margin:0 auto;"> 

                              <tbody> 

                                <tr> 

                                  <td height="${top_space20}" style="line-height: 1px;font-size: 1px;"> &nbsp; </td> 

                                </tr> 

                                <tr> 

                                  <td height="15" style="line-height: 1px;font-size: 1px;"> &nbsp; </td> 

                                </tr> 

                                <tr> 

                                  <td class="center" style="font-size:12px;mso-line-height-rule: exactly;line-height:15px;color:#666666;font-family: ${font-family};font-weight:400;text-align:center;"> 

                                    <div class="mktNoTrack" id="footertext1" mktoname="Text 1"> 

                                      <div>

                                         This email was sent to {{lead.Email Address}}, if you would like to unsubscribe, click 

                                        <a class="btnLine" href="https://shopboss.net/preference-center/" style="color: #666666;">here</a>. 

                                      </div> 

                                    </div> </td> 

                                </tr> 

                                <tr> 

                                  <td height="12" style="line-height: 1px;font-size: 1px;"> &nbsp; </td> 

                                </tr> 

                                <tr> 

                                  <td class="center" style="font-size:12px;mso-line-height-rule: exactly;line-height:18px;color:#666666;font-family: ${font-family};font-weight:400;text-align:center;"> 

                                    <div class="mktoText" id="footertext23e8904af-8088-48e9-a1b5-4c1de6e31ac4" mktoname="Text 2">

                                      <div>

                                         Shop Boss 

                                      </div>

                                    </div> </td> 

                                </tr> 

                                <tr> 

                                  <td class="center" style="font-size:12px;mso-line-height-rule: exactly;line-height:18px;color:#666666;font-family: ${font-family};font-weight:400;text-align:center;"> 

                                    <div class="mktoText" id="footertext347be13de-d375-4c13-9e0c-3b5901e7ad8b" mktoname="Text 3">

                                      <div>

                                         2035 Lakeside Center Way, Knoxville TN 37922 United States 

                                      </div>

                                    </div> </td> 

                                </tr> 

                                <tr> 

                                  <td height="7" style="line-height: 1px;font-size: 1px;"> &nbsp; </td> 

                                </tr> 

                                <tr> 

                                  <td style="font-size:12px;mso-line-height-rule: exactly;line-height:18px;color:#666666;font-family: ${font-family};font-weight:700;text-align:center;"> 

                                    <div class="mktoText" id="footertext4eb0a4847-b477-418f-b1dd-95832c7cf5c0" mktoname="Text 4">

                                      <div> 

                                        <a href="{{system.forwardToFriendLink}}" style="outline:none;text-decoration:none;color:#666666;">Send to a Friend</a>&nbsp;&nbsp;· 

                                        <a href="{{system.viewAsWebpageLink}}" style="outline:none;text-decoration:none;color:#666666;">View Online</a> 

                                      </div>

                                    </div> </td> 

                                </tr> 

                                <tr> 

                                  <td height="${btm_space20}" style="line-height: 1px;font-size: 1px;"> &nbsp; </td> 

                                </tr> 

                              </tbody> 

                            </table> </td> 

                        </tr> 

                      </tbody> 

                    </table></td> 

                </tr> 

              </tbody> 

            </table> </td> 

        </tr> 

      </tbody> 

    </table> 

    <!-- Outer table ends here -->  

  </body>

</html>

 

kenmckown
Level 3

Re: Issues with iOS email rendering

This definitely fixed it, but would love to know the changes made. 

Disha_Goyal6
Level 4

Re: Issues with iOS email rendering

Hi @kenmckown, I have made many changes. You can compare both HTML codes here.

As it is difficult to mention all lines here.

 

Thanks,

Disha