Мне нужна ваша помощь, чтобы сделать подпись Gmail отзывчивой.
Я пробовал много вещей (разные ... в голове для каждого медиазапроса и т. Д. c.), Переходил к различным вопросам и ответам в Stackoverflow но ничто не решило мою проблему.
Я также следовал рекомендациям разработчика от Gmail .
Мне нужна отзывчивая подпись, когда я go для мобильной версии Gmail. (cf the class = "mobile-view").
Если у вас другие подходы, чем этот, я буду рад их опробовать!
Заранее спасибо.
Вот код:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
@media only screen and (min-width:769px) {
.mobile-view {display: none !important;}
}
</style>
<style type="text/css">
@media only screen and (max-width:768px) {
.desktop-view {display: none !important;}
}
</style>
</head>
<body>
<table class="desktop-view" cellpadding="0" cellspacing="0" style="table-layout: fixed; vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Tahoma;">
<tbody>
<tr>
<td>
<table cellpadding="0" cellspacing="0" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Tahoma;">
<tbody>
<tr>
<td style="vertical-align: middle;">
<a href="http://www.optimize-matter.com/?utm_source=Email&utm_medium=Internal&utm_campaign=lien_signature">
<img src="https://picsum.photos/200" width="150">
</a>
</td>
<td width="20">
<div style="width: 20px;"></div>
</td>
<td color="#95c8c1" direction="vertical" width="1" class="sc-jhAzac hmXDXQ" style="width: 1px; border-bottom: none; border-left: 1px solid rgb(149, 200, 193);"></td>
<td width="20">
<div style="width: 20px;"></div>
</td>
<td style="vertical-align: middle;">
<table cellpadding="0" cellspacing="0" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Tahoma;">
<tbody>
<tr height="20" style="vertical-align: middle;">
<td width="30" style="vertical-align: middle;">
<table cellpadding="0" cellspacing="0" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Tahoma;">
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</td>
<td style="vertical-align: middle;">
<h3 color="#000000" style="margin: 0px; font-size: 18px; color: rgb(0, 0, 0);">
<span style="font-size: 13px;">Name ●</span>
<span style="font-size: 11px;">Job</span>
</h3>
</td>
</tr>
<tr height="20" style="vertical-align: middle;">
<td width="30" style="vertical-align: middle;">
<table cellpadding="0" cellspacing="0" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Tahoma;">
<tbody>
<tr>
<td style="vertical-align: bottom;">
<span color="#95c8c1" width="11" style="display: block; background-color: rgb(149, 200, 193);">
<img src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/phone-icon-2x.png" color="#95c8c1" width="13" style="display: block; background-color: rgb(149, 200, 193);">
</span>
</td>
</tr>
</tbody>
</table>
</td>
<td style="padding: 0px; color: rgb(0, 0, 0);">
<a href="00 00 00 00 00" color="#000000" style="text-decoration: none; color: rgb(0, 0, 0); font-size: 12px;">
<span>00 00 00 00 00</span>
</a> |
<a href="00 00 00 00 00 " color="#000000" style="text-decoration: none; color: rgb(0, 0, 0); font-size: 12px;">
<span>00 00 00 00 00</span>
</a>
</td>
</tr>
<tr height="20" style="vertical-align: middle;">
<td width="30" style="vertical-align: middle;">
<table cellpadding="0" cellspacing="0" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Tahoma;">
<tbody>
<tr>
<td style="vertical-align: bottom;">
<span color="#95c8c1" width="11" style="display: block; background-color: rgb(149, 200, 193);">
<img src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/email-icon-2x.png" color="#95c8c1" width="13" style="display: block; background-color: rgb(149, 200, 193);">
</span>
</td>
</tr>
</tbody>
</table>
</td>
<td style="padding: 0px;">
<a href="mailto:name@job.com" color="#000000" style="text-decoration: none; color: rgb(0, 0, 0); font-size: 12px;">
<span>name@job.com</span>
</a>
</td>
</tr>
<tr height="20" style="vertical-align: middle;">
<td width="30" style="vertical-align: middle;">
<table cellpadding="0" cellspacing="0" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Tahoma;">
<tbody>
<tr>
<td style="vertical-align: bottom;">
<span color="#95c8c1" width="11" style="display: block; background-color: rgb(149, 200, 193);">
<img src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/address-icon-2x.png" color="#95c8c1" width="13" style="display: block; background-color: rgb(149, 200, 193);">
</span>
</td>
</tr>
</tbody>
</table>
</td>
<td style="padding: 0px;">
<span color="#000000" style="font-size: 12px; color: rgb(0, 0, 0);">
<span>Adress</span>
</span>
</td>
</tr>
<tr>
<td height="10">
<div></div>
</td>
<td style="display: flex; margin-top: 10px;">
<a href="#" color="#6A78D1" style="display: inline-block; margin-right: 5px; background-color: rgb(149, 200, 193);">
<img src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/twitter-icon-2x.png" alt="twitter" color="#6A78D1" height="24" style="background-color: rgb(149, 200, 193); max-width: 135px; display: block;">
</a>
<div width="10"></div>
<a href="#" color="#6A78D1" style="display: inline-block; padding: 0px; background-color: rgb(106, 120, 209);">
<img src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/linkedin-icon-2x.png" alt="linkedin" color="#6A78D1" height="24" style="background-color: rgb(149, 200, 193); max-width: 135px; display: block;">
</a>
</td>
</tr>
</tbody>
</table>
</td>
<td width="40">
<div style="width: 40px;"></div>
</td>
<td style="vertical-align: middle;">
<img src="https://picsum.photos/75" width="75">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td height="15"></td>
</tr>
<tr>
<td color="#95c8c1" direction="vertical" style="border-bottom: none; border-top: 1px solid rgb(149, 200, 193); margin-bottom: 10px;"></td>
</tr>
<tr>
<td>
<span style="font-size: 11px; font-style: italic">Lorem ipsum <a href="mailto:support@job.com"><span>support@job.com</span></a></span>
</td>
</tr>
</tbody>
</table>
<table class="mobile-view" cellpadding="0" cellspacing="0" style="table-layout: fixed; vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Tahoma;">
<tbody>
<tr>
<td>
<table cellpadding="0" cellspacing="0" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Tahoma;">
<tbody>
<tr>
<td style="vertical-align: middle;">
<a href="#">
<img src="https://picsum.photos/150" width="150">
</a>
</td>
<td width="20">
<div style="width: 20px;"></div>
</td>
<td color="#95c8c1" direction="vertical" width="1" style="width: 1px; border-bottom: none; border-left: 1px solid rgb(149, 200, 193);"></td>
<td width="20">
<div style="width: 20px;"></div>
</td>
<td style="vertical-align: middle;">
<table cellpadding="0" cellspacing="0" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Tahoma;">
<tbody>
<tr style="vertical-align: middle;">
<td>
<h3 color="#000000" style="margin: 0px; color: rgb(0, 0, 0);">
<span style="font-size: 11px;">Name Lastname</span>
</h3>
</td>
</tr>
<tr style="vertical-align: middle;">
<td style="vertical-align: middle;">
<h3 color="#000000" style="margin: 0px; color: rgb(0, 0, 0);">
<span style="font-size: 9px;">Job name</span>
</h3>
</td>
</tr>
<tr height="20" style="vertical-align: middle;">
<td style="padding: 0px; color: rgb(0, 0, 0);">
<a href="tel:00 00 00 00 00" color="#000000" style="text-decoration: none; color: rgb(0, 0, 0); font-size: 12px;">
<span>00 00 00 00 00</span>
</a> |
<a href="tel:00 00 00 00 00" color="#000000" style="text-decoration: none; color: rgb(0, 0, 0); font-size: 12px;">
<span>00 00 00 00 00 </span>
</a>
</td>
</tr>
<tr height="20" style="vertical-align: middle;">
<td style="padding: 0px;">
<a href="mailto:name@job.com" color="#000000" style="text-decoration: none; color: rgb(0, 0, 0); font-size: 12px;">
<span>name@job.com</span>
</a>
</td>
</tr>
<tr height="20" style="vertical-align: middle;">
<td style="padding: 0px;">
<span color="#000000" style="font-size: 10px; color: rgb(0, 0, 0);">
<span>13 Adress of Company</span>
</span>
</td>
</tr>
<tr>
<td style="display: flex; margin-top: 10px;">
<a href="#" color="#6A78D1" style="display: inline-block; margin-right: 5px; background-color: rgb(149, 200, 193);">
<img src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/twitter-icon-2x.png" alt="twitter" color="#6A78D1" height="24" style="background-color: rgb(149, 200, 193); max-width: 135px; display: block;">
</a>
<div width="10"></div>
<a href="#" color="#6A78D1" style="display: inline-block; padding: 0px; background-color: rgb(106, 120, 209);">
<img src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/linkedin-icon-2x.png" alt="linkedin" color="#6A78D1" height="24" style="background-color: rgb(149, 200, 193); max-width: 135px; display: block;">
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td height="15"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td color="#95c8c1" direction="vertical" style="border-bottom: none; border-top: 1px solid rgb(149, 200, 193); margin-bottom: 10px;">
<span style="font-size: 9px; font-style: italic">Lorem ipsum <a href="mailto:support@job.com"><span>support@job.com</span></a></span></td>
</tr>
</tbody>
</table>
</body>
</html>