Search code examples
htmlcssemailoutlookhtml-email

Need to left align button in outlook email - mobile view


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%20Link%20Clicked&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 class="light" 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 class="light" 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" class="light" 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.


Solution

  • 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 from the table
    • class CTA is called in media query (@media screen and (max-width: 550px) {) to left align 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{float:left !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%20Link%20Clicked&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 class="light" 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 class="light" 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 class="CTA" 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" class="light" 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>