CTAs rendering in Outlook App | Community
Skip to main content
Tom_Hemy
Tom_Hemy
New Participant
April 15, 2020
Solved

CTAs rendering in Outlook App

  • April 15, 2020
  • 1 reply
  • 4860 views

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!

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Prashanth_K

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>

 

 
This code allows you to control your CTA for both web and application version. The section <!--[if mso]>// <![endif]--> has the outlook code.  
I hope the above is useful to you. Let me know if you need any help. 

Thanks, 
Prashanth
 

1 reply

P
Prashanth_KAccepted solution
New Participant
April 16, 2020

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>

 

 
This code allows you to control your CTA for both web and application version. The section <!--[if mso]>// <![endif]--> has the outlook code.  
I hope the above is useful to you. Let me know if you need any help. 

Thanks, 
Prashanth
 
    Tom_Hemy
    Tom_HemyAuthor
    New Participant
    April 17, 2020

    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

    P
    Prashanth_K
    New Participant
    April 17, 2020

    Hi Tom, 

    That's nice to hear. I request you to mark this as a solution so that it stands resolved. 

     

    Regards, 

    Prashanth

    Terms & ConditionsAccessibility statement

    Loading footer...