Home > database >  Need to left align button in outlook email - mobile view
Need to left align button in outlook email - mobile view

Time：09-13

This is the code I am using for a button that needs to be left-aligned. It is left-aligned in all clients except for Outlook mobile.

<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
 <meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="x-apple-disable-message-reformatting"><meta name="color-scheme" content="light dark"><meta name="supported-color-schemes" content="light dark"><!--[if !mso]><!--><meta http-equiv="X-UA-Compatible" content="IE=edge"><!--<![endif]--><title>%%=v(@preheader)=%%</title><!--[if mso]>
  <style type="text/css">
    table {border-collapse:collapse;border-spacing:0;margin:0;}
    div, td {padding:0;}
    div {margin:0 !important;}
    sup {font-size: 100% !important;}
  </style>
  <noscript>
    <xml>
      <o:OfficeDocumentSettings>
        <o:PixelsPerInch>96</o:PixelsPerInch>
    </xml>
  </noscript>
<![endif]--><!--[if gte mso 15]>
  <style type="text/css" media="all">
    /* Outlook 2013 Height Fix */
    table, tr, td {
    border-collapse: collapse;
    border-spacing: 0; }
a{ text-decoration: none !important;}
.em_hide_desktop {
                    display: none !important;
}
  </style>
<![endif]-->
<style type="text/css" >/* http://meyerweb.com/eric/tools/css/reset/ 
      v2.0 | 20110126
      License: none (public domain)
      */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
.pcr {font-size:16px !important; line-height:24px !important; color:#333333; font-family:'PT Sans', 'Lucida Grande', sans-serif, Helvetica, 'Arial', sans-serif;font-weight: normal;margin:0px 0px 15px 0px !important; }
  t {font-size:16px !important; line-height:24px !important; color:#333333; font-family:'PT Sans', 'Lucida Grande', sans-serif, Helvetica, 'Arial', sans-serif;font-weight: normal;margin:0px 0px 15px 0px !important; }
.em_hide_desktop {
                    display: none !important;
}



ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}</style>
 <style type="text/css" >/* CLIENT-SPECIFIC STYLES */
img {
    -ms-interpolation-mode: bicubic;
}
/* Force IE to smoothly render resized images. */
#outlook a {
    padding: 0;
}
/* Remove spacing between tables in Outlook 2007 and up. */
.ReadMsgBody {
    width: 100%;
}
.ExternalClass {
    width: 100%;
}
/* Force Outlook.com to display emails at full width. */
p, a, td {
    mso-line-height-rule: exactly;
}
/* Force Outlook to render line heights as they're originally set. */
p, a, td, body, table {
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}
/* Prevent Windows- and Webkit-based mobile platforms from changing declared text sizes. */
.ExternalClass, .ExternalClass p, .ExternalClass td, .ExternalClass div, .ExternalClass span, .ExternalClass font {
    line-height: 100%;
}
#MessageViewBody a {
    color: inherit;
    text-decoration: none;
    font-size: inherit;
    font-family: inherit;
    font-weight: inherit;
    line-height: inherit;
}
/* Force Outlook.com to display line heights normally. */
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;
}
span.MsoHyperlink {
    mso-style-priority: 99;
    color: inherit;
}
span.MsoHyperlinkFollowed {
    mso-style-priority: 99;
    color: inherit;
}</style>
 <style type="text/css" >@media screen and (max-width: 460px) {
.deviceWidth {
    width: 100%!important;
    min-width: 100%!important;
}
.em_main_table {
    width: 100% !important;
}
.em_wrapper {
    width: 100% !important;
}
  
.center {
    text-align: center !important;
    display: block !important;
}
.right {
    text-align: right !important;
    padding-right:20px;
}
.em_hide_desktop {
                    display: block !important;
}
.em_hide {
                    display: none !important;
}
}</style>
 <style type="text/css" >@media screen and (max-width: 350px) {
.three-col .column {
    max-width: 100% !important;
}
.two-col .column {
    max-width: 100% !important;
}
}

@media screen and (min-width: 351px) and (max-width: 460px) {
/* .three-col .column {
    max-width: 50% !important;
}
.three-col .column, .column1 {
    max-width: 100% !important;
    display: block !important;
} */
.five-col .column {
    max-width: 20% !important;
}
.six-col .column {
    max-width: 16% !important;
}
 
#em_hide_desktop {
                    display: block !important;
}
#em_hide {
                    display: none !important;
}
}

@media screen and (min-width: 461px) {
.three-col .column {
    max-width: 30% !important;
}
.three-col .column1 {
    max-width: 20% !important;
}
.two-col .column {
    max-width: 50% !important;
}
.five-col .column {
    max-width: 20% !important;
}
.sidebar .small {
    max-width: 16% !important;
}
.sidebar .large {
    max-width: 84% !important;
}
 
#em_hide_desktop {
                    display: block !important;
}
#em_hide {
                    display: none !important;
}
}

@media screen and (max-width: 550px) {
.three-col .column, .column1 {
    max-width: 100% !important;
    display: block !important;
}
.two-col .column, .two-col img {
    max-width: 100% !important;
    display: block !important;
}
.five-col .column {
    max-width: 33.3% !important;
}
.sidebar .small {
    max-width: 100% !important;
}
.sidebar .large {
    max-width: 100% !important;
}
 
#em_hide_desktop {
                    display: block !important;
}
#em_hide {
                    display: none !important;
}
}</style>
 <style type="text/css" >@font-face {
    font-family: 'PT Sans';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/ptsans/v12/jizaRExUiTo99u79D0-ExcOPIDUg-g.woff2) format('woff2');
unicode-range: U 0460-052F, U 1C80-1C88, U 20B4, U 2DE0-2DFF, U A640-A69F, U FE2E-FE2F;
}</style>
 <style type="text/css" >@media (prefers-color-scheme: dark) {
.dark-img {
    display: block !important;
    width: auto !important;
    overflow: visible !important;
    float: none !important;
    max-height: inherit !important;
    max-width: inherit !important;
    line-height: auto !important;
    margin-top: 0px !important;
    visibility: inherit !important;
}
.light-img {
    display: none !important;
}
.link-arrow-lm {
    display: none !important;
}
.link-arrow-dm {
    display: inline !important;
}
.darkmode {
    background-color: #161615 !important;
}
.darkmode-light-bg {
    background-color: #ffffff !important;
}
h1, h2, h3, h4 {
    color: #4F5948 !important;
}
h3, h4 {
    color: #c7102d !important;
}
h3, h4 {
    color: #c7102d !important;
}
p {
    color: #4F5948 !important;
}
a {
    color: #ffffff !important;
}
.light {
    color: #ffffff !important;
}
.dark {
    color: #4F5948 !important;
}
.blue {
    color: #005B9E !important;
}
.orange {
    color: #FF6000 !important;
}
[data-ogsc] .dark-img {
    display: block !important;
    width: auto !important;
    overflow: visible !important;
    float: none !important;
    max-height: inherit !important;
    max-width: inherit !important;
    line-height: auto !important;
    margin-top: 0px !important;
    visibility: inherit !important;
}
[data-ogsc] .light-img {
    display: none !important;
}
[data-ogsc] .link-arrow-lm {
    display: none !important;
}
[data-ogsc] .link-arrow-dm {
    display: inline !important;
}
[data-ogsc] .darkmode {
    background-color: #161615 !important;
}
[data-ogsc] .darkmode-light-bg {
    background-color: #ffffff !important;
}
[data-ogsc] h1, [data-ogsc] h2 {
    color: #4F5948 !important;
}
[data-ogsc] h3, [data-ogsc] h4 {
    color: #c7102d !important;
}
[data-ogsc] p {
    color: #4F5948 !important;
}
[data-ogsc] a {
    color: #ffffff !important;
}
[data-ogsc] .light {
    color: #ffffff !important;
}
[data-ogsc] .dark {
    color: #4F5948 !important;
}
[data-ogsc] .blue {
    color: #005B9E !important;
}
[data-ogsc] .orange {
    color: #FF6000 !important;
}
}</style>
</head>
<body>

<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse: collapse; padding: 0; margin: 0; width:100%;" width="100%">
          <tbody>
           <tr>
            <td align="left" style="border-top:3px solid #FF6000;"><a alias="Hero image" href="%%MBPDEEPLINKCHOOSEYOURSEATS%%?utm_source=mc-transactional&utm_medium=email&utm_campaign=bcn-destination-upsell&utm_content=select-room-img&utm_term=en&ajs_event=Email Link Clicked&ajs_uid=%%SubscriberKey%%" style="text-decoration:none; color:#ffffff; font-family:'PT Sans','Lucida Grande', Helvetica, Arial,sans-serif; font-size: 14px; line-height: 26px; font-weight: normal; text-align:center;" target="_blank"><img alt="Two women entering a hotel room" border="0" src="https://assets.sunwingtravelgroup.com/image/upload/v1641915021/sunwing-prod/Email/Sunwing/BCN/images/SelectRoom_02.png" style="border: 0; display: block; font-family:'PT Sans','Lucida Grande', Helvetica, Arial,sans-serif; font-size: 14px; height: auto; max-width: 600px; outline: 0; padding: 0; width: 100%; display: block;" width="660"></a></td>
           </tr>
          </tbody>
         </table>

         <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse: collapse; padding: 0; margin: 0; width:100%;" width="100%">
          <tbody>
           <tr>
            <td align="left" style="padding: 0 26px;">
            <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse: collapse; padding: 0; margin: 0; width:100%;" width="100%">
             <tbody>
              <tr>
               <td align="left" style="padding: 20px 0 10px;">
               <p  style="color:#595959; font-family:'PT Sans','Lucida Grande', Helvetica, Arial,sans-serif; font-weight:bold; font-size:25px; line-height:30px; margin:0;"><span style="font-weight: bold;">Pick the perfect spot</span></p>
               </td>
              </tr>
              <tr>
               <td align="left" style="padding: 5px 0 0;">
               <p  style="color:#595959; font-family:'PT Sans','Lucida Grande', Helvetica, Arial,sans-serif; font-weight:normal; font-size:14px; line-height:20px; margin:0;">
Want to be closest to the beach or steps from the pool? Choose your room location prior to arrival.
</p>
               </td>
              </tr>
             <tr>
               <td align="left"  style="padding: 30px 0;align:left !important"><!-- CTA BUTTON -->
               <table align="left" bgcolor="#005B9E" border="0" cellpadding="0" cellspacing="0" role="presentation" style="border: none; border-collapse: collapse; border-spacing: 0; margin: auto; mso-table-lspace: 0; mso-table-rspace: 0; background-color:#005B9E; min-width: 180px;">
                <tbody>
                 <tr>
                  <td align="left" style="border-collapse:collapse; font-family:'PT Sans','Lucida Grande', Helvetica, Arial,sans-serif; font-size: 14px; line-height: 18px; font-weight: normal; padding:0; border: 0; text-align:center; color:#ffffff; mso-padding-alt:12px 26px; vertical-align: middle;"><a alias="Start planning-CTA"  href="%%MBPDEEPLINKVACATIONCHECKLIST%%?utm_source=mc-transactional&utm_medium=email&utm_campaign=bcn-destination-upsell&utm_content=select-room-cta&utm_term=en" style="text-decoration:none; color:#ffffff; font-family:'PT Sans','Lucida Grande', Helvetica, Arial,sans-serif; font-size: 14px; line-height: 26px; font-weight: normal; text-align:center;" target="_blank"><!--[if !gte mso 9]><!----><span style="padding:12px 26px; display:block;align:left"><!--<![endif]-->Select your room <!--[if !gte mso 9]><!----> </span><!--<![endif]--> </a></td>
                 </tr>
                </tbody>
               </table>
               </td>
               <!-- /CTA BUTTON -->
              </tr>
             </tbody>
            </table>
            </td>
           </tr>
          </tbody>
         </table>


</body>
</html>

Any suggestions would be helpful. Stackoverflow just doesn't let me post saying please add more details so not sure what else to add and just typing to see if the error goes away so that I can post.

CodePudding user response：

align="left" attribute applied to a table cell aligns its content. If it's applied to a table, it aligns the table itself.

I see these things that probably affect on aligning of the button you want to center:

  • you use align="left" on 2 td and 1 table surrounding the link of the button
  • there's padding-right="400" attribute that does not exist and probably breaks your desired layout
  • align:left !important in a style attribute on the cell containing the button code

CodePudding user response：

I have done the following. Let me now if it works for you.

  • added a class of CTA to the table that contains the CTA,
  • removed align from the table
  • removed margin: auto
  • class CTA is called in media query (@media screen and (max-width: 550px) {) to enable the centering of the table.

<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
 <meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="x-apple-disable-message-reformatting"><meta name="color-scheme" content="light dark"><meta name="supported-color-schemes" content="light dark"><!--[if !mso]><!--><meta http-equiv="X-UA-Compatible" content="IE=edge"><!--<![endif]--><title>%%=v(@preheader)=%%</title><!--[if mso]>
  <style type="text/css">
    table {border-collapse:collapse;border-spacing:0;margin:0;}
    div, td {padding:0;}
    div {margin:0 !important;}
    sup {font-size: 100% !important;}
  </style>
  <noscript>
    <xml>
      <o:OfficeDocumentSettings>
        <o:PixelsPerInch>96</o:PixelsPerInch>
    </xml>
  </noscript>
<![endif]--><!--[if gte mso 15]>
  <style type="text/css" media="all">
    /* Outlook 2013 Height Fix */
    table, tr, td {
    border-collapse: collapse;
    border-spacing: 0; }
a{ text-decoration: none !important;}
.em_hide_desktop {
                    display: none !important;
}
  </style>
<![endif]-->
<style type="text/css" >/* http://meyerweb.com/eric/tools/css/reset/ 
      v2.0 | 20110126
      License: none (public domain)
      */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
.pcr {font-size:16px !important; line-height:24px !important; color:#333333; font-family:'PT Sans', 'Lucida Grande', sans-serif, Helvetica, 'Arial', sans-serif;font-weight: normal;margin:0px 0px 15px 0px !important; }
  t {font-size:16px !important; line-height:24px !important; color:#333333; font-family:'PT Sans', 'Lucida Grande', sans-serif, Helvetica, 'Arial', sans-serif;font-weight: normal;margin:0px 0px 15px 0px !important; }
.em_hide_desktop {
                    display: none !important;
}



ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}</style>
 <style type="text/css" >/* CLIENT-SPECIFIC STYLES */
img {
    -ms-interpolation-mode: bicubic;
}
/* Force IE to smoothly render resized images. */
#outlook a {
    padding: 0;
}
/* Remove spacing between tables in Outlook 2007 and up. */
.ReadMsgBody {
    width: 100%;
}
.ExternalClass {
    width: 100%;
}
/* Force Outlook.com to display emails at full width. */
p, a, td {
    mso-line-height-rule: exactly;
}
/* Force Outlook to render line heights as they're originally set. */
p, a, td, body, table {
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}
/* Prevent Windows- and Webkit-based mobile platforms from changing declared text sizes. */
.ExternalClass, .ExternalClass p, .ExternalClass td, .ExternalClass div, .ExternalClass span, .ExternalClass font {
    line-height: 100%;
}
#MessageViewBody a {
    color: inherit;
    text-decoration: none;
    font-size: inherit;
    font-family: inherit;
    font-weight: inherit;
    line-height: inherit;
}
/* Force Outlook.com to display line heights normally. */
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;
}
span.MsoHyperlink {
    mso-style-priority: 99;
    color: inherit;
}
span.MsoHyperlinkFollowed {
    mso-style-priority: 99;
    color: inherit;
}</style>
 <style type="text/css" >@media screen and (max-width: 460px) {
.deviceWidth {
    width: 100%!important;
    min-width: 100%!important;
}
.em_main_table {
    width: 100% !important;
}
.em_wrapper {
    width: 100% !important;
}
  
.center {
    text-align: center !important;
    display: block !important;
}
.right {
    text-align: right !important;
    padding-right:20px;
}
.em_hide_desktop {
                    display: block !important;
}
.em_hide {
                    display: none !important;
}
}</style>
 <style type="text/css" >@media screen and (max-width: 350px) {
.three-col .column {
    max-width: 100% !important;
}
.two-col .column {
    max-width: 100% !important;
}
}

@media screen and (min-width: 351px) and (max-width: 460px) {
/* .three-col .column {
    max-width: 50% !important;
}
.three-col .column, .column1 {
    max-width: 100% !important;
    display: block !important;
} */
.five-col .column {
    max-width: 20% !important;
}
.six-col .column {
    max-width: 16% !important;
}
 
#em_hide_desktop {
                    display: block !important;
}
#em_hide {
                    display: none !important;
}
}

@media screen and (min-width: 461px) {
.three-col .column {
    max-width: 30% !important;
}
.three-col .column1 {
    max-width: 20% !important;
}
.two-col .column {
    max-width: 50% !important;
}
.five-col .column {
    max-width: 20% !important;
}
.sidebar .small {
    max-width: 16% !important;
}
.sidebar .large {
    max-width: 84% !important;
}
 
#em_hide_desktop {
                    display: block !important;
}
#em_hide {
                    display: none !important;
}
}

@media screen and (max-width: 550px) {
.three-col .column, .column1 {
    max-width: 100% !important;
    display: block !important;
}
.two-col .column, .two-col img {
    max-width: 100% !important;
    display: block !important;
}
.five-col .column {
    max-width: 33.3% !important;
}
.sidebar .small {
    max-width: 100% !important;
}
.sidebar .large {
    max-width: 100% !important;
}
 
#em_hide_desktop {
                    display: block !important;
}
#em_hide {
                    display: none !important;
}
.CTA{margin:0 auto !important;}
}</style>
 <style type="text/css" >@font-face {
    font-family: 'PT Sans';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/ptsans/v12/jizaRExUiTo99u79D0-ExcOPIDUg-g.woff2) format('woff2');
unicode-range: U 0460-052F, U 1C80-1C88, U 20B4, U 2DE0-2DFF, U A640-A69F, U FE2E-FE2F;
}</style>
 <style type="text/css" >@media (prefers-color-scheme: dark) {
.dark-img {
    display: block !important;
    width: auto !important;
    overflow: visible !important;
    float: none !important;
    max-height: inherit !important;
    max-width: inherit !important;
    line-height: auto !important;
    margin-top: 0px !important;
    visibility: inherit !important;
}
.light-img {
    display: none !important;
}
.link-arrow-lm {
    display: none !important;
}
.link-arrow-dm {
    display: inline !important;
}
.darkmode {
    background-color: #161615 !important;
}
.darkmode-light-bg {
    background-color: #ffffff !important;
}
h1, h2, h3, h4 {
    color: #4F5948 !important;
}
h3, h4 {
    color: #c7102d !important;
}
h3, h4 {
    color: #c7102d !important;
}
p {
    color: #4F5948 !important;
}
a {
    color: #ffffff !important;
}
.light {
    color: #ffffff !important;
}
.dark {
    color: #4F5948 !important;
}
.blue {
    color: #005B9E !important;
}
.orange {
    color: #FF6000 !important;
}
[data-ogsc] .dark-img {
    display: block !important;
    width: auto !important;
    overflow: visible !important;
    float: none !important;
    max-height: inherit !important;
    max-width: inherit !important;
    line-height: auto !important;
    margin-top: 0px !important;
    visibility: inherit !important;
}
[data-ogsc] .light-img {
    display: none !important;
}
[data-ogsc] .link-arrow-lm {
    display: none !important;
}
[data-ogsc] .link-arrow-dm {
    display: inline !important;
}
[data-ogsc] .darkmode {
    background-color: #161615 !important;
}
[data-ogsc] .darkmode-light-bg {
    background-color: #ffffff !important;
}
[data-ogsc] h1, [data-ogsc] h2 {
    color: #4F5948 !important;
}
[data-ogsc] h3, [data-ogsc] h4 {
    color: #c7102d !important;
}
[data-ogsc] p {
    color: #4F5948 !important;
}
[data-ogsc] a {
    color: #ffffff !important;
}
[data-ogsc] .light {
    color: #ffffff !important;
}
[data-ogsc] .dark {
    color: #4F5948 !important;
}
[data-ogsc] .blue {
    color: #005B9E !important;
}
[data-ogsc] .orange {
    color: #FF6000 !important;
}
}</style>
</head>
<body>

<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse: collapse; padding: 0; margin: 0; width:100%;" width="100%">
          <tbody>
           <tr>
            <td align="left" style="border-top:3px solid #FF6000;"><a alias="Hero image" href="%%MBPDEEPLINKCHOOSEYOURSEATS%%?utm_source=mc-transactional&utm_medium=email&utm_campaign=bcn-destination-upsell&utm_content=select-room-img&utm_term=en&ajs_event=Email Link Clicked&ajs_uid=%%SubscriberKey%%" style="text-decoration:none; color:#ffffff; font-family:'PT Sans','Lucida Grande', Helvetica, Arial,sans-serif; font-size: 14px; line-height: 26px; font-weight: normal; text-align:center;" target="_blank"><img alt="Two women entering a hotel room" border="0" src="https://assets.sunwingtravelgroup.com/image/upload/v1641915021/sunwing-prod/Email/Sunwing/BCN/images/SelectRoom_02.png" style="border: 0; display: block; font-family:'PT Sans','Lucida Grande', Helvetica, Arial,sans-serif; font-size: 14px; height: auto; max-width: 600px; outline: 0; padding: 0; width: 100%; display: block;" width="660"></a></td>
           </tr>
          </tbody>
         </table>

         <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse: collapse; padding: 0; margin: 0; width:100%;" width="100%">
          <tbody>
           <tr>
            <td align="left" style="padding: 0 26px;">
            <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse: collapse; padding: 0; margin: 0; width:100%;" width="100%">
             <tbody>
              <tr>
               <td align="left" style="padding: 20px 0 10px;">
               <p  style="color:#595959; font-family:'PT Sans','Lucida Grande', Helvetica, Arial,sans-serif; font-weight:bold; font-size:25px; line-height:30px; margin:0;"><span style="font-weight: bold;">Pick the perfect spot</span></p>
               </td>
              </tr>
              <tr>
               <td align="left" style="padding: 5px 0 0;">
               <p  style="color:#595959; font-family:'PT Sans','Lucida Grande', Helvetica, Arial,sans-serif; font-weight:normal; font-size:14px; line-height:20px; margin:0;">
Want to be closest to the beach or steps from the pool? Choose your room location prior to arrival.
</p>
               </td>
              </tr>
             <tr>
               <td align="left"  style="padding: 30px 0;align:left !important"><!-- CTA BUTTON -->
               <table  bgcolor="#005B9E" border="0" cellpadding="0" cellspacing="0" role="presentation" style="border: none; border-collapse: collapse; border-spacing: 0; mso-table-lspace: 0; mso-table-rspace: 0; background-color:#005B9E; min-width: 180px;">
                <tbody>
                 <tr>
                  <td align="left" style="border-collapse:collapse; font-family:'PT Sans','Lucida Grande', Helvetica, Arial,sans-serif; font-size: 14px; line-height: 18px; font-weight: normal; padding:0; border: 0; text-align:center; color:#ffffff; mso-padding-alt:12px 26px; vertical-align: middle;"><a alias="Start planning-CTA"  href="%%MBPDEEPLINKVACATIONCHECKLIST%%?utm_source=mc-transactional&utm_medium=email&utm_campaign=bcn-destination-upsell&utm_content=select-room-cta&utm_term=en" style="text-decoration:none; color:#ffffff; font-family:'PT Sans','Lucida Grande', Helvetica, Arial,sans-serif; font-size: 14px; line-height: 26px; font-weight: normal; text-align:center;" target="_blank"><!--[if !gte mso 9]><!----><span style="padding:12px 26px; display:block;align:left"><!--<![endif]-->Select your room <!--[if !gte mso 9]><!----> </span><!--<![endif]--> </a></td>
                 </tr>
                </tbody>
               </table>
               </td>
               <!-- /CTA BUTTON -->
              </tr>
             </tbody>
            </table>
            </td>
           </tr>
          </tbody>
         </table>


</body>
</html>

Page link：https//www.codepudding.com/database/543061.html

Prev:how can i make dynamic layout using media query?
Next:API 400 error Username required Password required
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding