How to give 100% width to anchor tag in conditional comment rendering?

Question

I am working on an outlook email template, I am trying to render this piece of code, especially for outlook Windows app

<div style="width:100%;">
    <!--[if mso]>
      <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="{{QUEST_URL}}" style="height:36px;v-text-anchor:middle;width:100%;" arcsize="5%" strokecolor="#01AAA3" fillcolor="#01AAA3">
        <w:anchorlock/>
        <center style="color:#ffffff;font-family: Manrope, Tahoma;font-size:14px; font-weight: 800;line-height:30px; ">START QUEST</center>
      </v:roundrect>
    <![endif]-->
    <a href="{{QUEST_URL}}" style="background-color:#01AAA3;border-radius:10px;color:#ffffff;display:inline-block; font-family: Manrope, Tahoma;font-size: 14px; font-weight: 800;line-height:30px;text-align:center;text-decoration:none;width:100%;-webkit-text-size-adjust:none;mso-hide:all;"> START QUEST </a>
  </div>

But the anchor's width is not being rendered 100%. Text is also not showing.

It's rendering like:

I want it to be rendered like:

So, please need help in that regard.

score 0 · Answer 1 · answered Oct 02 '22 at 18:57

Try with setting the parent div's width to 100vw so that it'll take the whole width, then give the 100% width to the anchor tag.

<div style="width:100vw;">
    <!--[if mso]>
      <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="{{QUEST_URL}}" style="height:36px;v-text-anchor:middle;width:100%;" arcsize="5%" strokecolor="#01AAA3" fillcolor="#01AAA3">
        <w:anchorlock/>
        <center style="color:#ffffff;font-family: Manrope, Tahoma;font-size:14px; font-weight: 800;line-height:30px; ">START QUEST</center>
      </v:roundrect>
    <![endif]-->
    <a href="{{QUEST_URL}}" style="background-color:#01AAA3;border-radius:10px;color:#ffffff;display:inline-block; font-family: Manrope, Tahoma;font-size: 14px; font-weight: 800;line-height:30px;text-align:center;text-decoration:none;width:100%;-webkit-text-size-adjust:none;mso-hide:all;"> START QUEST </a>
  </div>

it's working fine for gmail. Windows Outlook App is messed up. — rehan qasim, Oct 02 '22 at 19:04

score 0 · Answer 2 · answered Oct 03 '22 at 22:01

Outlook desktop for Windows is rendered as if for print. Since you already have VML, you can safely make the width and height fixed pixels without affecting other email clients.

So change the VML width and height to what you want, e.g.:

height:36px;v-text-anchor:middle;width:600px;

How to give 100% width to anchor tag in conditional comment rendering?

2 Answers2