Hi there, can someone help me with setting up an NPS Email invite template? It doesn’t render correctly when on a smaller screen or mobile device (you have to scroll to the right to read the invitation). The logo and buttoncolour is client specific so I have space savers in the code for these. Here is the HTML code I have:
<!DOCTYPE html>
<html>
<head>
<style>
@media screen and (max-width:600px) {
.block {
display: block !important;
width: 100% !important;
}
.inline-block {
display: inline-block !important;
}
.templateContainer {
max-width: 600px !important;
width: 100% !important;
}
}
</style>
</head>
<body>
<table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" id="bodyTable" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; margin: 0; padding: 0; background-color: #ededee; border-collapse: collapse !important; height: 100% !important; width: 100% !important;" width="100%">
<tbody>
<tr>
<td align="center" id="bodyCell" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; margin: 0; padding: 20px; border-top: 10px solid #D7D7D7; height: 100% !important; width: 100% !important;" valign="top"><!-- BEGIN TEMPLATE // -->
<table border="0" cellpadding="0" cellspacing="0" class="templateContainer" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 660px; border-collapse: collapse !important;">
<tbody>
<tr>
<td align="center" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" valign="top"><!-- BEGIN HEADER // -->
<table border="0" cellpadding="0" cellspacing="0" id="templateHeader" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color: #ffffff; border-top: 1px solid #FFFFFF; border-bottom: 1px solid #D7D7D7; border-collapse: collapse !important;" width="100%">
<tbody>
<tr>
<td class="headerContent" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #505050; font-family: Helvetica; font-size: 20px; font-weight: bold; line-height: 100%; text-align: center; vertical-align: middle; padding: 20px 0 20px 0;" valign="top"><img src="${e://Field/ClientLogo}" /></td>
</tr>
</tbody>
</table>
<!-- // END HEADER --></td>
</tr>
<tr>
<td align="center" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" valign="top"><!-- BEGIN BODY // -->
<table border="0" cellpadding="0" cellspacing="0" id="templateBody" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color: #ffffff; border-top: 1px solid #FFFFFF; border-bottom: 1px solid #D7D7D7; border-collapse: collapse !important;" width="100%">
<tbody>
<tr>
<td class="bodyContent" mc:edit="body_content" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #505050; font-family: Helvetica; font-size: 16px; line-height: 150%; text-align: center; padding: 20px;" valign="top">
<h2 style="display: block; font-family: Helvetica; font-size: 20px; font-style: normal; font-weight: bold; line-height: 100%; letter-spacing: normal; text-align: center; color: #404040 !important; margin: 20px 0 10px 0;">Hi ${m://FirstName}<span style="font-size:19px;">,</span></h2>
<br />
Considering your experience with [CLIENT NAME], how likely would you be to recommend their services to a friend or colleague?<br />
<div>
<table align="center" border="0" cellspacing="15" style="background-color:#ffffff;border-radius:3px;font-family:verdana,geneva,sans-serif;" width="100%">
<tbody>
<tr>
<td class="block" style="white-space: nowrap;">
<div class="inline-block" style="font-size:11px;">Not at all</div>
<div class="inline-block" style="font-size:11px;">Likely</div>
</td>
<td class="block">
<table align="center" border="0" cellpadding="10" cellspacing="0" style="text-align:center;" width="80%">
<tbody>
<tr>
<td class="block" style="background: rgb(255, 255, 255); text-align: center;">
<div><!--[if mso]>
<v:roundrect xmlns:v='urn:schemas-microsoft-com:vml' xmlns:w='urn:schemas-microsoft-com:office:word' href="${l://ChoiceLink/QID2/0}" style="height:53px;v-text-anchor:middle;width:50px;"" arcsize="10%"" stroke="f" fillcolor="${e://Field/ButtonColour}" ><w:anchorlock/><center><![endif]--><a class="block" href="${l://ChoiceLink/QID2/0}" style="background-color: ${e://Field/ButtonColour}; border-radius: 5px; color: #ffffff; display: inline-block; font-family: sans-serif; font-size: 12px; font-weight: bold; text-align: center; text-decoration: none; width: 50px; -webkit-text-size-adjust: none;">${q://QID2/ChoiceDescription/0}</a> <!--[if mso]>
</center>
</v:roundrect>
<![endif]--></div>
</td>
<td class="block" style="background: rgb(255, 255, 255); text-align: center;">
<div><!--[if mso]>
<v:roundrect xmlns:v='urn:schemas-microsoft-com:vml' xmlns:w='urn:schemas-microsoft-com:office:word' href="${l://ChoiceLink/QID2/1}" style="height:53px;v-text-anchor:middle;width:50px;"" arcsize="10%"" stroke="f" fillcolor="${e://Field/ButtonColour}" ><w:anchorlock/><center><![endif]--><a class="block" href="${l://ChoiceLink/QID2/1}" style="background-color: ${e://Field/ButtonColour}; border-radius: 5px; color: #ffffff; display: inline-block; font-family: sans-serif; font-size: 12px; font-weight: bold; text-align: center; text-decoration: none; width: 50px; -webkit-text-size-adjust: none;">${q://QID2/ChoiceDescription/1}</a> <!--[if mso]>
</center>
</v:roundrect>
<![endif]--></div>
</td>
<td class="block" style="background: rgb(255, 255, 255); text-align: center;">
<div><!--[if mso]>
<v:roundrect xmlns:v='urn:schemas-microsoft-com:vml' xmlns:w='urn:schemas-microsoft-com:office:word' href="${l://ChoiceLink/QID2/2}" style="height:53px;v-text-anchor:middle;width:50px;"" arcsize="10%"" stroke="f" fillcolor="${e://Field/ButtonColour}" ><w:anchorlock/><center><![endif]--><a class="block" href="${l://ChoiceLink/QID2/2}" style="background-color: ${e://Field/ButtonColour}; border-radius: 5px; color: #ffffff; display: inline-block; font-family: sans-serif; font-size: 12px; font-weight: bold; text-align: center; text-decoration: none; width: 50px; -webkit-text-size-adjust: none;">${q://QID2/ChoiceDescription/2}</a> <!--[if mso]>
</center>
</v:roundrect>
<![endif]--></div>
</td>
<td class="block" style="background: rgb(255, 255, 255); text-align: center;">
<div><!--[if mso]>
<v:roundrect xmlns:v='urn:schemas-microsoft-com:vml' xmlns:w='urn:schemas-microsoft-com:office:word' href="${l://ChoiceLink/QID2/3}" style="height:53px;v-text-anchor:middle;width:50px;"" arcsize="10%"" stroke="f" fillcolor="${e://Field/ButtonColour}" ><w:anchorlock/><center><![endif]--><a class="block" href="${l://ChoiceLink/QID2/3}" style="background-color: ${e://Field/ButtonColour}; border-radius: 5px; color: #ffffff; display: inline-block; font-family: sans-serif; font-size: 12px; font-weight: bold; text-align: center; text-decoration: none; width: 50px; -webkit-text-size-adjust: none;">${q://QID2/ChoiceDescription/3}</a> <!--[if mso]>
</center>
</v:roundrect>
<![endif]--></div>
</td>
<td class="block" style="background: rgb(255, 255, 255); text-align: center;">
<div><!--[if mso]>
<v:roundrect xmlns:v='urn:schemas-microsoft-com:vml' xmlns:w='urn:schemas-microsoft-com:office:word' href="${l://ChoiceLink/QID2/4}" style="height:53px;v-text-anchor:middle;width:50px;"" arcsize="10%"" stroke="f" fillcolor="${e://Field/ButtonColour}" ><w:anchorlock/><center><![endif]--><a class="block" href="${l://ChoiceLink/QID2/4}" style="background-color: ${e://Field/ButtonColour}; border-radius: 5px; color: #ffffff; display: inline-block; font-family: sans-serif; font-size: 12px; font-weight: bold; text-align: center; text-decoration: none; width: 50px; -webkit-text-size-adjust: none;">${q://QID2/ChoiceDescription/4}</a> <!--[if mso]>
</center>
</v:roundrect>
<![endif]--></div>
</td>
<td class="block" style="background: rgb(255, 255, 255); text-align: center;">
<div><!--[if mso]>
<v:roundrect xmlns:v='urn:schemas-microsoft-com:vml' xmlns:w='urn:schemas-microsoft-com:office:word' href="${l://ChoiceLink/QID2/5}" style="height:53px;v-text-anchor:middle;width:50px;"" arcsize="10%"" stroke="f" fillcolor="${e://Field/ButtonColour}" ><w:anchorlock/><center><![endif]--><a class="block" href="${l://ChoiceLink/QID2/5}" style="background-color: ${e://Field/ButtonColour}; border-radius: 5px; color: #ffffff; display: inline-block; font-family: sans-serif; font-size: 12px; font-weight: bold; text-align: center; text-decoration: none; width: 50px; -webkit-text-size-adjust: none;">${q://QID2/ChoiceDescription/5}</a> <!--[if mso]>
</center>
</v:roundrect>
<![endif]--></div>
</td>
<td class="block" style="background: rgb(255, 255, 255); text-align: center;">
<div><!--[if mso]>
<v:roundrect xmlns:v='urn:schemas-microsoft-com:vml' xmlns:w='urn:schemas-microsoft-com:office:word' href="${l://ChoiceLink/QID2/6}" style="height:53px;v-text-anchor:middle;width:50px;"" arcsize="10%"" stroke="f" fillcolor="${e://Field/ButtonColour}" ><w:anchorlock/><center><![endif]--><a class="block" href="${l://ChoiceLink/QID2/6}" style="background-color: ${e://Field/ButtonColour}; border-radius: 5px; color: #ffffff; display: inline-block; font-family: sans-serif; font-size: 12px; font-weight: bold; text-align: center; text-decoration: none; width: 50px; -webkit-text-size-adjust: none;">${q://QID2/ChoiceDescription/6}</a> <!--[if mso]>
</center>
</v:roundrect>
<![endif]--></div>
</td>
<td class="block" style="background: rgb(255, 255, 255); text-align: center;">
<div><!--[if mso]>
<v:roundrect xmlns:v='urn:schemas-microsoft-com:vml' xmlns:w='urn:schemas-microsoft-com:office:word' href="${l://ChoiceLink/QID2/7}" style="height:53px;v-text-anchor:middle;width:50px;"" arcsize="10%"" stroke="f" fillcolor="${e://Field/ButtonColour}" ><w:anchorlock/><center><![endif]--><a class="block" href="${l://ChoiceLink/QID2/7}" style="background-color: ${e://Field/ButtonColour}; border-radius: 5px; color: #ffffff; display: inline-block; font-family: sans-serif; font-size: 12px; font-weight: bold; text-align: center; text-decoration: none; width: 50px; -webkit-text-size-adjust: none;">${q://QID2/ChoiceDescription/7}</a> <!--[if mso]>
</center>
</v:roundrect>
<![endif]--></div>
</td>
<td class="block" style="background: rgb(255, 255, 255); text-align: center;">
<div><!--[if mso]>
<v:roundrect xmlns:v='urn:schemas-microsoft-com:vml' xmlns:w='urn:schemas-microsoft-com:office:word' href="${l://ChoiceLink/QID2/8}" style="height:53px;v-text-anchor:middle;width:50px;"" arcsize="10%"" stroke="f" fillcolor="${e://Field/ButtonColour}" ><w:anchorlock/><center><![endif]--><a class="block" href="${l://ChoiceLink/QID2/8}" style="background-color: ${e://Field/ButtonColour}; border-radius: 5px; color: #ffffff; display: inline-block; font-family: sans-serif; font-size: 12px; font-weight: bold; text-align: center; text-decoration: none; width: 50px; -webkit-text-size-adjust: none;">${q://QID2/ChoiceDescription/8}</a> <!--[if mso]>
</center>
</v:roundrect>
<![endif]--></div>
</td>
<td class="block" style="background: rgb(255, 255, 255); text-align: center;">
<div><!--[if mso]>
<v:roundrect xmlns:v='urn:schemas-microsoft-com:vml' xmlns:w='urn:schemas-microsoft-com:office:word' href="${l://ChoiceLink/QID2/9}" style="height:53px;v-text-anchor:middle;width:50px;"" arcsize="10%"" stroke="f" fillcolor="${e://Field/ButtonColour}" ><w:anchorlock/><center><![endif]--><a class="block" href="${l://ChoiceLink/QID2/9}" style="background-color: ${e://Field/ButtonColour}; border-radius: 5px; color: #ffffff; display: inline-block; font-family: sans-serif; font-size: 12px; font-weight: bold; text-align: center; text-decoration: none; width: 50px; -webkit-text-size-adjust: none;">${q://QID2/ChoiceDescription/9}</a> <!--[if mso]>
</center>
</v:roundrect>
<![endif]--></div>
</td>
<td class="block" style="background: rgb(255, 255, 255); text-align: center;">
<div><!--[if mso]>
<v:roundrect xmlns:v='urn:schemas-microsoft-com:vml' xmlns:w='urn:schemas-microsoft-com:office:word' href="${l://ChoiceLink/QID2/10}" style="height:53px;v-text-anchor:middle;width:50px;"" arcsize="10%"" stroke="f" fillcolor="${e://Field/ButtonColour}" ><w:anchorlock/><center><![endif]--><a class="block" href="${l://ChoiceLink/QID2/10}" style="background-color: ${e://Field/ButtonColour}; border-radius: 5px; color: #ffffff; display: inline-block; font-family: sans-serif; font-size: 12px; font-weight: bold; text-align: center; text-decoration: none; width: 50px; -webkit-text-size-adjust: none;">${q://QID2/ChoiceDescription/10}</a> <!--[if mso]>
</center>
</v:roundrect>
<![endif]--></div>
</td>
</tr>
</tbody>
</table>
</td>
<td class="block">
<div class="inline-block" style="font-size:11px;">Extremely</div>
<div class="inline-block" style="font-size:11px;">Likely</div>
</td>
</tr>
</tbody>
</table>
</div>
<br />
We understand you’re busy, so we’ve designed the survey to take <em><strong>less than two minutes</strong></em> to complete.<br />
<br />
Thank you, we appreciate you taking the time to help.</td>
</tr>
</tbody>
</table>
<!-- // END BODY --></td>
</tr>
<tr>
<td align="center" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" valign="top"><!-- BEGIN FOOTER // -->
<table border="0" cellpadding="0" cellspacing="0" id="templateFooter" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color: #ffffff; border-top: 1px solid #FFFFFF; border-collapse: collapse !important;" width="100%">
<tbody>
<tr>
<td class="footerContent" mc:edit="footer_content01" style="text-size-adjust: 100%; color: rgb(128, 128, 128); font-family: Helvetica; font-size: 16px; line-height: 150%; padding: 20px; text-align: center;" valign="top">This survey is being conducted by xxx.<br />
<br />
Please contact xxx with any questions.</td>
</tr>
<tr>
<td class="footerContent" mc:edit="footer_content01" style="text-size-adjust: 100%; color: rgb(128, 128, 128); font-family: Helvetica; font-size: 10px; line-height: 120%; padding: 20px; text-align: center;" valign="top"><em>This survey invitation was sent to you only because you are a customer of [CLIENT NAME]. To unsubscribe from receiving future surveys, please ${l://OptOutLink?d=click%20here}. By completing this survey you acknowledge that [CLIENT NAME] may contact you regarding your response to thank you for your participation, and/or in an effort to improve the products or services provided to you as a customer.</em></td>
</tr>
</tbody>
</table>
<!-- // END FOOTER --></td>
</tr>
</tbody>
</table>
<!-- // END TEMPLATE --></td>
</tr>
</tbody>
</table>
</body>
</html>
