Bonjour je souhaite faire une signature sur outlook mais j'aimerai que celle ci soit responsive comment dois-je faire ?
Je souhaiterais sur format mobile que le logo passe au dessus
voici mon code
<!DOCTYPE html>
<html lang="en">
<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">
<title>Document</title>
</head>
<body>
<table>
<tr>
<td width="30%" valign="middle">
<img src="https://www.picano.fr/assets/img/icon/logo-picano-black.svg"
style="width: 10%; min-width: 250px; " alt="">
</td>
<td width="70%" valign="top" style="padding: 20px 0 20px 20px; display: flex; flex-direction: row;">
<div class="line"
style="width: 2px; background-color: #193256; height: 200px; margin: 10px 10px;">
</div>
<div>
<h3
style="margin: 0 0 5px; font-size: 20px; color:#193256;line-height: 1.2; font-family: sans-serif;">
Nom prénom</h3>
<h4
style="margin: 0 0 5px; font-size: 14px; color:#398FCD;line-height: 1.2; font-family: sans-serif; text-transform: uppercase; font-weight: normal;">
entreprise</h4>
<h5
style="margin: 0 0 5px; font-size: 12px; color:#193256;line-height: 1.2; font-family: sans-serif; font-weight: normal;">
M E T I E R </h5>
<br>
<p
style="margin: 0 0 5px; font-size: 10px; color:#193256;line-height: 1.2; font-family: sans-serif;">
Standard : 00 00 00 00 00</p>
<p
style="margin: 0 0 5px; font-size: 10px; color:#193256;line-height: 1.2; font-family: sans-serif;">
Ligne fixe : 00 00 00 00 00</p>
<p
style="margin: 0 0 5px; font-size: 10px; color:#193256;line-height: 1.2; font-family: sans-serif;">
Portable : 00 00 00 00 00</p>
<br>
<p
style="margin: 0 0 5px; font-size: 10px; color:#193256;line-height: 1.2; font-family: sans-serif;">
2 rue de la rue</p>
<p
style="margin: 0 0 5px; font-size: 10px; color:#193256;line-height: 1.2; font-family: sans-serif;">
2 rue de la rue</p>
</div>
</td>
</tr>
</table>
</body>
</html>
Je souhaiterais sur format mobile que le logo passe au dessus
voici mon code
<!DOCTYPE html>
<html lang="en">
<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">
<title>Document</title>
</head>
<body>
<table>
<tr>
<td width="30%" valign="middle">
<img src="https://www.picano.fr/assets/img/icon/logo-picano-black.svg"
style="width: 10%; min-width: 250px; " alt="">
</td>
<td width="70%" valign="top" style="padding: 20px 0 20px 20px; display: flex; flex-direction: row;">
<div class="line"
style="width: 2px; background-color: #193256; height: 200px; margin: 10px 10px;">
</div>
<div>
<h3
style="margin: 0 0 5px; font-size: 20px; color:#193256;line-height: 1.2; font-family: sans-serif;">
Nom prénom</h3>
<h4
style="margin: 0 0 5px; font-size: 14px; color:#398FCD;line-height: 1.2; font-family: sans-serif; text-transform: uppercase; font-weight: normal;">
entreprise</h4>
<h5
style="margin: 0 0 5px; font-size: 12px; color:#193256;line-height: 1.2; font-family: sans-serif; font-weight: normal;">
M E T I E R </h5>
<br>
<p
style="margin: 0 0 5px; font-size: 10px; color:#193256;line-height: 1.2; font-family: sans-serif;">
Standard : 00 00 00 00 00</p>
<p
style="margin: 0 0 5px; font-size: 10px; color:#193256;line-height: 1.2; font-family: sans-serif;">
Ligne fixe : 00 00 00 00 00</p>
<p
style="margin: 0 0 5px; font-size: 10px; color:#193256;line-height: 1.2; font-family: sans-serif;">
Portable : 00 00 00 00 00</p>
<br>
<p
style="margin: 0 0 5px; font-size: 10px; color:#193256;line-height: 1.2; font-family: sans-serif;">
2 rue de la rue</p>
<p
style="margin: 0 0 5px; font-size: 10px; color:#193256;line-height: 1.2; font-family: sans-serif;">
2 rue de la rue</p>
</div>
</td>
</tr>
</table>
</body>
</html>