How to make outlook email signature responsive - email

Question

I'm setting up a new email signature for my client which needs to be responsive .
I tried out one layout which includes div , tables etc which works out good on desktops but not on mobiles .
Below is one such sample but the email appears as same is desktop & mobile with the cells / divs shifting one under the other .
As a part of my research , i tried using this email boilerplate which ended up in the same way . - https://github.com/seanpowell/Email-Boilerplate
<!--[if gte mso 9]>
<table cellspacing=0><tr><td style="font-family: Arial; font-size: 10pt; color: #fff; background-color: orange; width: 250px; height: 100px; padding: 3px; vertical-align: top">
<![endif]-->
<div style="float: left; font-family: Arial; font-size: 10pt; color: #fff; background-color: orange; width: 250px; height: 100px; padding: 3px; vertical-align: top">
<strong>Administrator</strong><br>Phone {qwfqwfcqwdqwfqfgqwfqwbfjqnwjkfqnwjfbqiwnf qwnfiquwnqwnfiqnwifjnqwfinqwifnqwjinfqjiwnfijqwnf}<br>Email {qwfqwfqwcqwfqwfqwfdqwcrqwrqwcrqwrqwrcqwrxqwrqwcxqrwqxrqwxqwx}
</div>
<!--[if gte mso 9]>
</td><td style="font-family: Arial; font-size: 10pt; color: #fff; background-color: red; width: 250px; height: 100px; padding: 3px; vertical-align: top">
<![endif]-->
<div style="float: left; font-family: Arial; font-size: 10pt; color: #fff; background-color: red; width: 250px; height: 100px; padding: 3px; vertical-align: top">
<strong>qwfqwfqwdqw fqwfqwfqwdfqwdqwfqwfqwdqwdqwdqw</strong> ​
</div>
<!--[if gte mso 9]>
</td></tr></table>
<![endif]-->
https://jsfiddle.net/623y57p1/1/
Have a look at the demo i made . This is responsive in browsers , but not in outlook .

Answer 1

I created a sample code that works with Outlook. The two columns of this email footer will display side-by-side if the viewing window is wider than 580px. If it goes below that width, it will revert to two stacked columns. You can set the width breakpoint by adjusting <td width="290">.
<table align="center" role="contentinfo" cellspacing="0" cellpadding="0" border="1" width="100%" style="margin: 0 auto;">
<tr>
<td width="290" style="direction: ltr !important; display: inline-block;">
Column A
</td>
<td width="290" style="direction: ltr !important; display: inline-block;">
Column B
</td>
</tr>
</table>
Please keep in mind a few caveats:
Outlook 2007-2019 does not support responsive email. There is no support for #media queries.
The width for the table must be set to <table width="100%">.
The width for the table cells to 290 because the maximum width for an Outlook viewing window is 580px.
You can turn off <table border="1"> It's on for demonstration purposes.
<table role="contentinfo"> supports screen readers. Please leave it to help visually impaired users know about the structure of your email message.
https://jsfiddle.net/wallyglenn/w0s4xmc0/60529/
Good luck.