html - Responsive mail signature

Question

I've been trying to make responsive mail signature. This is my code.

<!-- --><!-- 1. Google Fonts Code --><!-- 2. Dotty Cell Borders -->
<p style="border-bottom: 1px solid #000; color: -internal-quirk-inherit;">&nbsp;</p>
<table class="table" style="background-color: #ffffff; font-family: lato; text-align: left; color: #000000; font-size: 14px;">
<tbody>
<tr style="height: 1px;">
<th class="table__heading" style="width: 100px; padding-right: 20px; padding-left: 20px; text-align: center;" rowspan="4">
<p><a href="www.jemiol.com"><img src="http://serwer1528495.home.pl/jemiol/SIGNATURE/LOGO.png" width="90px" /></a></p>
<p><a href="https://www.facebook.com/LukaszJemiol"><img src="http://serwer1528495.home.pl/jemiol/SIGNATURE/FACEBOOK.png" width="25px" /></a>&nbsp;<a href="https://www.instagram.com/lukaszjemiol/"><img src="http://serwer1528495.home.pl/jemiol/SIGNATURE/INSTAGRAM.png" width="25px" /></a>&nbsp;<a href="https://pl.linkedin.com/company/lukaszjemiol"><img src="http://serwer1528495.home.pl/jemiol/SIGNATURE/LINKEDIN.png" width="25px" /></a></p>
</th>
<td class="table__content" style="font-weight: bold;" colspan="4">DAMIAN D?BROWSKI</td>
</tr>
<tr style="height: 1px;">
<td class="table__content" colspan="4">ADMINISTRATOR STRONY INTERNETOWEJ</td>
</tr>
<tr style="height: 1px;">
<td class="table__content" colspan="4"><a style="color: #000000; text-decoration: none;" href="tel:-">-</a></td>
</tr>
<tr style="height: 1px;">
<td class="table__content" colspan="4"><a style="color: #000000; text-decoration: none;" href="mailto:-">-</a></td>
</tr>
</tbody>
</table>
<p style="border-top: 1px solid #000; color: -internal-quirk-inherit;">&nbsp;</p>

I found an example how to make second column responsive, but I spent hours on it and can't apply it to my signature...

This is this example:

<!--[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>{Display name}</strong><br>Phone {Phone}<br>Email <a href="mailto:{E-mail}" style="color: #fff; text-decoration: none;">{E-mail}</a>
</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>Company.com</strong>
?</div>
<span style="clear: both;"></span>
<!--[if gte mso 9]>    
</td></tr></table>
<![endif]-->

Can someone please tell me how to make it right?

question from:https://stackoverflow.com/questions/66065298/responsive-mail-signature

Answer 1

It's recommended to use tables when doing the HTML layout for mails. The different email readers are not really barely compatible with other than tables.

I'd go with a two-column table to achieve what you are looking for, as float is one of that properties that not all readers understand

Something like

<table>
    <tr>
        <td>
            <strong>{Display name}</strong><br>Phone {Phone}<br>Email <a href="mailto:{E-mail}" style="color: #fff; text-decoration: none;">{E-mail}</a>
        </td>
        <td>
            <strong>Company.com</strong>
       </td>
    </tr>
</table>