Need help re-aligning text boxes in email template

Anonymous · ‎05-16-2017

Hello,

I am having trouble moving a couple of text boxes to a certain spot. Can someone please help? Please see screenshot below.

I'm also providing the code here:

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

<head>

<!--[if mso]>

.primary-font {

font-family: "Arial Narrow", sans-serif !important;

}

</style>

<![endif]-->

<!--[if mso]>

.secondary-font {

font-family: Arial, sans-serif !important;

}

</style>

<![endif]-->

<style>

/*startcommon*/

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

table.m_boxing{

width: 100% !important;

}

/*endcommon*/

</style>

/* CLIENT-SPECIFIC STYLES */

#outlook a {

padding: 0;

}

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

.ReadMsgBody {

width: 100%;

}

.ExternalClass {

width: 100%;

}

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

.ExternalClass,

.ExternalClass p,

.ExternalClass span,

.ExternalClass font,

.ExternalClass td,

.ExternalClass div {

line-height: 100%;

}

/* Force Hotmail to display normal line spacing */

/* iOS BLUE LINKS */

.appleBody a {

color: .m_000;

text-decoration: none;

}

.appleFooter a {

color: .m_000;

text-decoration: none;

}

@-ms-viewport {

width: device-width;

}

</style>

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

/*starttablet*/

.mktoVideoThumbnail{

width: 100% !important;

height: auto!important;

max-height:inherit!important;

min-height:inherit!important;

}

body {

width: auto !important;

}

table[class="table600"] {

width: 450px !important;

}

table[class="table-inner"] {

width: 86% !important;

}

table[class="table1-2"] {

width: 47% !important;

clear: both;

}

table[class="table1-3"] {

width: 29.4% !important;

}

table[class="table1-4"] {

width: 100% !important;

text-align: left !important;

}

table[class="table2-3"] {

width: 64% !important;

text-align: center !important;

}

table[class="table3-3"] {

width: 100% !important;

text-align: center !important;

clear: both;

}

table[class="footer-logo"] {

width: 10% !important;

text-align: right !important;

}

td[class="outer"] {

min-width: 0 !important;

}

td[class="stack"] {

padding-bottom: 40px !important;

}

.stack-tablet {

padding-bottom: 20px !important;

overflow: visible !important;

float: none !important;

mso-hide: none !important;

display: block !important;

}

img[class="mobile-img"] {

width: 100% !important;

height: auto !important;

}

td[class="center-tablet"] {

text-align: center !important;

}

td[class="hide-tablet"] {

display: none !important;

}

table[class="footer-column"] {

width: 47% !important;

text-align: left !important;

}

tr[class="stack-tablet"] {

padding-bottom: 0 !important;

display: block !important;

}

.respimage,

.m_free-image .table600 {

width: 450px !important;

height: auto;

}

.m_team .spacer {

width: 26px;

}

.m_header td.center-tablet {

text-align: center !important;

}

.m_header td a {

margin-top: 0px !important;

}

.m_header .cta table {

float: none !important;

margin-top: 0 !important;

margin-right: auto !important;

margin-bottom: 0 !important;

margin-left: auto !important;

}

.m_header .social {

text-align: center !important;

}

.m_two-articles .table1-2 {

width: 100% !important;

}

.m_two-articles img {

width: 100% !important;

height: auto;

}

.m_two-articles .stack-tablet {

height: 40px;

}

.m_contacts .table1-3 {

width: 100% !important;

clear: both;

}

.m_footer .table1-2 {

width: 100% !important;

clear: both;

}

.m_footer .text,

.m_footer .unsub {

text-align: center !important;

}

/*endtablet*/

}

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

/*startmobile*/

body {

width: auto !important;

}

table[class="table600"] {

width: 290px !important;

}

table[class="table-inner"] {

width: 80% !important;

float: none !important;

}

table[class="table1-2"] {

width: 100% !important;

clear: both;

}

table[class="table1-3"] {

width: 100% !important;

clear: both;

}

table[class="table1-4"] {

width: 100% !important;

text-align: center !important;

}

table[class="table2-3"] {

width: 100% !important;

text-align: center !important;

}

table[class="table3-3"] {

width: 100% !important;

text-align: center !important;

clear: both;

}

table[class="footer-logo"] {

width: 60% !important;

text-align: center !important;

}

td[class="outer"] {

min-width: 0 !important;

}

td[class="td3-1"] {

width: 60% !important;

text-align: center !important;

}

.stack-smartphone {

padding-bottom: 20px !important;

overflow: visible !important;

float: none !important;

display: block !important;

mso-hide: none !important;

}

td[class="center-smartphone"] {

text-align: center !important;

}

img[class="mobile-img"] {

width: 100% !important;

}

td[class="center-tablet"] {

text-align: center !important;

}

td[class="hide-smartphone"] {

display: none !important;

}

table[class="footer-column"] {

width: 100% !important;

text-align: center !important;

}

.respimage,

.m_free-image .table600 {

width: 290px !important;

height: auto;

}

/*endmobile*/

}

</style>

</head>

</div>

<tbody>

<tr>

<tbody>

<tr>

<tbody>

<tr>

<tbody>

<tr>

</tr>

<tr>

<tbody>

<tr>

</div> </td>

</tr>

</tbody>

</table>

<tbody>

</tr>

<tr>

</tr>

<tr>

</div></td>

</tr>

</tbody>

</table>

</center> </td>

</tr>

<tr>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table>

<tbody>

<tr>

<tbody>

<tr>

</tr>

<tr>

Welcome {{lead.First Name:default=Privileges Travel Member}}

<br />Credits: $ {{lead.DBC Balance}}

</div>

</div></td>

</tr>

<tr>

</tr>

</tbody>

</table>

</center> </td>

</tr>

</tbody>

</table>

<tbody>

<tr>

<td class="background" style="-webkit-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;-ms-text-size-adjust: 100%;padding-bottom: 0;padding-left: 0;background-repeat: no-repeat;background-position: center center;background:${heroBackgroundImage};background-color:${heroBackgroundColor};padding-top:

0;padding-right: 0;background-image:${heroBackgroundImage};border-collapse: collapse;" background="${heroBackgroundImage}" bgcolor="${heroBackgroundColor}" valign="top" width="600">

<!--[if gte mso 9]>

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

<v:fill type="frame" src="${heroBackgroundImage}" color="${heroBackgroundColor}" />

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

<![endif]-->

<tbody>

<tr>

<tbody>

<tr>

</tr>

<p style="background-color: #243678; padding: 25px 25px 20px 30px;"><span style="font-family: helvetica, arial, sans-serif; font-size: 30px; line-height: 35px;"><strong>Celebrate Your Privileges and Make your travel worth more!</strong></span></p>

</div> </td>

</tr>

<tr>

</tr>

<p style="background-color: #243678; padding: 15px 15px 10px 20px;"><strong><span color="#ffffff" style="color: #ffffff;" mce-data-marked="1">Ready to use your savings credits?</span></strong></p>

</div> </td>

</tr>

<tr>

</tr>

<tr>

<tbody>

<tr>

<td style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; text-align: left; border-collapse: collapse;" align="center" bgcolor="${heroButtonBackgroundColor}"> <a href="${heroLink}" target="_blank" class="primary-font button" style="-webkit-text-size-adjust:

100%;-ms-text-size-adjust: 100%;-webkit-background-clip: padding-box;-moz-background-clip: padding;font-family:'Roboto Condensed', Arial, sans-serif;color: #ffffff;padding-top: 12px;padding-right: 18px;padding-bottom: 12px;padding-left:

18px;border-top-width:${heroBorderSize};border-right-width:${heroBorderSize};border-bottom-width:${heroBorderSize};border-left-width:${heroBorderSize};background-clip: padding-box;border-right-style: solid;border-bottom-style: solid;border-left-style:

solid;border-top-color:${heroBorderColor};border-right-color:${heroBorderColor};border-bottom-color:${heroBorderColor};border-left-color:${heroBorderColor};display: inline-block;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;border-top-style: solid;text-decoration: none;font-size: 20px;background-color:${heroButtonBackgroundColor};">${heroLinkText}</a> </td>

</tr>

</tbody>

</table>

</center> </td>

</tr>

<tr>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table>

<!--[if gte mso 9]>

</v:textbox>

</v:rect>

<![endif]-->

</center></td>

</tr>

</tbody>

</table>

<tbody>

<tr>

<tbody>

<tr>

</tr>

<tr>

</div>

</center> </td>

</tr>

<tr>

</tr>

</tbody>

</table>

</center> </td>

</tr>

</tbody>

</table>

<tbody>

<tr>

<tbody>

<tr>

</tr>

<tr>

<p style="text-align: center;"><span color="#243678" style="color: #000000;"><span style="font-size: 18px;"><b>MAKE YOUR TRAVEL WORTH MORE</b></span></span></p>

<p style="text-align: center;">You can also combine your Privileges Savings Credits with your American Express Membership Rewards points to save even more.<strong> </strong></p>

<p style="text-align: center;"><strong>We’re happy to assist you with all your travel needs.</strong></p>

</div></td>

</tr>

<tr>

</tr>

</tbody>

</table>

</center> </td>

</tr>

</tbody>

</table>

<tbody>

<tr>

<tbody>

<tr>

</tr>

<tr>

<tbody>

<tr>

<td style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; border-collapse: collapse;" align="center" bgcolor="${callToActionButtonBackgroundColor}"> <a href="${callToActionLink}" target="_blank" class="secondary-font button" style="-webkit-text-size-adjust:

100%;-ms-text-size-adjust: 100%;-webkit-background-clip: padding-box;font-size: 14px;font-family:'Lato', Arial, sans-serif;color: #ffffff;padding-top: 12px;padding-right: 18px;padding-bottom: 12px;padding-left:

18px;border-top-width:${callToActionBorderSize};border-right-width:${callToActionBorderSize};border-bottom-width:${callToActionBorderSize};border-left-width:${callToActionBorderSize};background-clip: padding-box;border-right-style: solid;border-bottom-style: solid;border-left-style:

solid;border-top-color:${callToActionBorderColor};border-right-color:${callToActionBorderColor};border-bottom-color:${callToActionBorderColor};border-left-color:${callToActionBorderColor};display: inline-block;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;-moz-background-clip: padding;border-top-style: solid;text-decoration:

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

</tr>

</tbody>

</table>

</center> </td>

</tr>

<tr>

</tr>

</tbody>

</table>

</center> </td>

</tr>

</tbody>

</table>

<tbody>

<tr>

<tbody>

<tr>

<tbody>

<tr>

<tbody>

</tr>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table>

</center> </td>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table>

<tbody>

<tr>

<tbody>

<tr>

</tr>

<tr>

<tbody>

<tr>

<a href="${socialLink2}" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-decoration: none;"><img alt="Twitter Icon" src="http://templates.marketo.net/newsletter4/ico-twitter.png" style="height: auto; outline: none; border-right-width: 0; border-bottom-width: 0; border-left-width: 0; text-decoration: none; -ms-interpolation-mode: bicubic; width: auto; border-top-width: 0; max-width: 100%; line-height: 100%; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; display: inline;" height="34" width="34" /></a>

<a href="${socialLink3}" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-decoration: none;"><img alt="LinkedIn Icon" src="http://templates.marketo.net/newsletter4/ico-linkedin.png" style="height: auto; outline: none; border-right-width: 0; border-bottom-width: 0; border-left-width: 0; text-decoration: none; -ms-interpolation-mode: bicubic; width: auto; border-top-width: 0; max-width: 100%; line-height: 100%; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; display: inline;" height="34" width="34" /></a>

<a href="${socialLink4}" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-decoration: none;"><img alt="Pinterest Icon" src="http://templates.marketo.net/newsletter4/ico-pinterest.png" style="height: auto; outline: none; border-right-width: 0; border-bottom-width: 0; border-left-width: 0; text-decoration: none; -ms-interpolation-mode: bicubic; width: auto; border-top-width: 0; max-width: 100%; line-height: 100%; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; display: inline;" height="34" width="34" /></a>

<a href="${socialLink5}" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-decoration: none;"><img alt="Mail Icon" src="http://templates.marketo.net/newsletter4/ico-mail.png" style="height: auto; outline: none; border-right-width: 0; border-bottom-width: 0; border-left-width: 0; text-decoration: none; -ms-interpolation-mode: bicubic; width: auto; border-top-width: 0; max-width: 100%; line-height: 100%; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; display: inline;" height="34" width="34" /></a> </td>

</tr>

</tbody>

</table>

</center> </td>

</tr>

<tr>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table>

<tbody>

<tr>

<tbody>

<tr>

<tbody>

<tr>

<tbody>

<tr>

<p><span style="color: #ffffff;"><span style="font-family: 'Gotham SSm A', 'Gotham SSm B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 11.2px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 500; letter-spacing: normal; orphans: 2; text-align: center; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; float: none; display: inline !important;">International Cruise & Excursion Gallery, Inc., d.b.a. Privileges, is a Registered Seller of Travel. </span><span class="s1">California Seller of Travel CST#2066521-50; Washington UBI #602 443 155 001 0001; Hawaii Travel Agent TAR #5192; Florida Seller of Travel #29452. </span></span></p>

</div></td>

</tr>

</tbody>

</table>

<tbody>

<tr>

</div></span> </td>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table></td>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table>

</body>

</html>

I appreciate your help!

Laura

Devraj_Grewal · ‎05-17-2017

Laura,

You will receive more visibility from the user community and a quicker response if you move this question to Products.

Anonymous · ‎05-17-2017

Thanks Devraj!

Need help re-aligning text boxes in email template

Need help re-aligning text boxes in email template

Re: Need help with coding issue

Re: Need help with coding issue