I am trying to format an email signature using a table, but I am facing an issue with how it appears on mobile devices.
On mobile screens, the text gets compressed and I want the second image to be displayed below the first one along with the text. While flex-wrap would solve this issue using Flexbox, I am hesitant to use it as it may not be supported in emails.
The HTML structure of my signature is as follows:
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<table
style="
font-family: Calibri, 'Trebuchet MS', sans-serif;
border-color: transparent;
border-collapse: collapse;
table-layout: fixed;
overflow-wrap: normal;
"
>
<tr>
<td
rowspan="6"
style="
padding-right: 10px;
vertical-align: middle;
width: 130px;
"
>
<img
src="https://via.placeholder.com/130"
alt=""
width="130"
height="130"
/>
</td>
<td>
<span style="color: #237; font-weight: 600; font-size: 20px"
>Ing. Jan Novák</span
>
</td>
<td
rowspan="6"
style="
padding-left: 30px;
vertical-align: middle;
width: 130px;
"
>
<img
src="https://via.placeholder.com/130"
alt=""
width="130"
height="130"
/>
</td>
</tr>
<tr>
<td>
<span style="color: #5d6d7f">ředitel FOOBAR a.s.</span>
</td>
</tr>
<tr>
<td>
<table
style="
border: none;
border-color: transparent;
border-collapse: collapse;
table-layout: fixed;
"
>
<tr>
<td>
<span style="color: #5d6d7f">Mobil: </span>
</td>
<td>
<a
href="tel:+420123456789"
style="
color: #237;
text-decoration: none;
font-weight: 600;
"
>+420 123 456 789</a
>
</td>
</tr>
<tr>
<td>
<span style="color: #5d6d7f">E-mail: </span>
</td>
<td>
<a
href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="caa4a5bcaba18aaca5a5a8abb8e4a9a5a7">[email protected]</a>"
style="color: #237; text-decoration: none"
><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="16787960777d567079797477643875797b">[email protected]</a></a
>
</td>
</tr>
<tr>
<td>
<span style="color: #5d6d7f">Web: </span>
</td>
<td>
<a
href="https://foobar.com"
style="color: #237; text-decoration: none"
>foobar.com</a
>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<a
href="https://via.placeholder.com/150"
download
style="color: #5d6d7f; font-size: 12px"
>Vizitka ke stažení</a
>
</td>
</tr>
</table>
</body>
</html>If you have any suggestions or solutions, your help would be greatly appreciated. Thank you in advance!