Hi everyone,
I'm having a bit of trouble getting my CTAs to render properly in the Outlook desktop app, here's the code/CSS I'm using:
<p style="text-align: center;"><span><a href="####" target="_blank" style="font-family: Helvetica, Arial, sans-serif; display: inline-block; background-color: #0a4977; border: 10px solid #0A4977; color: #ffffff; text-decoration: none; font-size: 18px; font-weight: bold; text-transform: uppercase; border-radius: 5px; margin: 0; text-align: center; width: fit-content; white-space: nowrap; padding: 3px 20px;">Watch now</a></span></p>
This is what it should look like, and does everywhere except the Outlook desktop app.
This is what it looks like on the Outlook desktop app.
Any help/advice is appreciated!
Solved! Go to Solution.
Hi Tom,
I have faced this issue where the email looks good in the outlook web version but not in the desktop app. Outlook accepts a table layout, Whatever code you write, try putting them inside a table so, that they will be rendered properly in the outlook desktop version. For instance please use the following code in your email to render the CTA perfectly in the outlook app.
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="center">
<div>
<!--[if mso]>
<a:rect xmlns:a="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="#" style="height:40px;v-text-anchor:middle;width:250px;" stroke="f" fillcolor="#0a4977" >
<w:anchorlock/>
<center>
<![endif]-->
<a id="cta-button" href="#" style="background-color: #0a4977; color: #ffffff; display: inline-block; font-family: sans-serif; font-size: 13px; font-weight: bold; line-height: 40px; text-align: center; text-decoration: none; width: 250px; -webkit-text-size-adjust: none;"
target="_blank">WATCH VIDEO</a>
<!--[if mso]>
</center>
</a:rect>
<![endif]-->
</div>
</td>
</tr>
</tbody>
</table>
Hi Tom,
I have faced this issue where the email looks good in the outlook web version but not in the desktop app. Outlook accepts a table layout, Whatever code you write, try putting them inside a table so, that they will be rendered properly in the outlook desktop version. For instance please use the following code in your email to render the CTA perfectly in the outlook app.
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="center">
<div>
<!--[if mso]>
<a:rect xmlns:a="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="#" style="height:40px;v-text-anchor:middle;width:250px;" stroke="f" fillcolor="#0a4977" >
<w:anchorlock/>
<center>
<![endif]-->
<a id="cta-button" href="#" style="background-color: #0a4977; color: #ffffff; display: inline-block; font-family: sans-serif; font-size: 13px; font-weight: bold; line-height: 40px; text-align: center; text-decoration: none; width: 250px; -webkit-text-size-adjust: none;"
target="_blank">WATCH VIDEO</a>
<!--[if mso]>
</center>
</a:rect>
<![endif]-->
</div>
</td>
</tr>
</tbody>
</table>
Hi Prasanth,
Thank you very much! I put the code into my email, and it works perfectly like you said!
Thanks again for the help!
Tom
Hi Tom,
That's nice to hear. I request you to mark this as a solution so that it stands resolved.
Regards,
Prashanth
Hi,
I am having the same issue. I am wondering where you inserted this in your code?
coding HTML for emails is an incredibly nuanced PITA! I'd suggest doing a LOT of googling (It's what I did in my early days). A great place to start is to google "bullet proof cta button"
Cheers
Jo