Я создал html отзывчивую подпись электронной почты и хотел бы настроить ее для использования в Gmail. Я нашел несколько статей в Интернете о том, как это сделать, но это не делает его отзывчивым. Пожалуйста, смотрите код ниже, поскольку экран минимизирует изменения изображения.
Я перешел по этой ссылке: https://www.youtube.com/watch?v=CejHfSH9zhY, но все, что я получаю, это настольная версия ссылки на gmail. Когда я отправляю электронное письмо с мобильного телефона, мне нужна мобильная версия подписи.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="x-apple-disable-message-reformatting">
<title></title>
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans">
<style type="text/css">
body {
font-family:'Open Sans';
}
p {
margin:0;
}
@media only screen and (max-width: 600px) {
.emailImageDesktop {
display:none;
}
.dividerDesktop {
display:none;
}
#mainStructure {
max-width:100% !important;
min-width:320px;
}
.deviceWidth {
width:100% !important;
float:left;
}
.noPadding {
padding-left:0 !important;
padding-right:0 !important;
}
.pb20 {
padding-bottom:20px;
}
.disclaimerText {
max-width:390px !important;
}
}
@media only screen and (max-width: 502px) {
.emailImageDesktop {
display:none;
}
.dividerDesktop {
display:none;
}
#mainStructure {
max-width:100% !important;
min-width:320px !important;
}
.deviceWidth {
width:100% !important;
float:left;
}
.noPadding {
padding-left:0 !important;
padding-right:0 !important;
}
.pb20 {
padding-bottom:20px;
}
.disclaimerText {
max-width:390px;
}
}
@media only screen and (max-width: 320px) {
.emailImageDesktop {
display:none;
}
.dividerDesktop {
display:none;
}
#mainStructure {
max-width:100% !important;
min-width:320px !important;
}
.deviceWidth {
width:100% !important;
float:left;
}
.noPadding {
padding-left:0 !important;
padding-right:0 !important;
}
.pb20 {
padding-bottom:20px;
}
.disclaimerText {
max-width:320px !important;
}
}
@media only screen and (min-width: 601px) {
.emailImageMobile {
display:none;
}
.dividerMobile {
display:none;
}
}
@media only screen and (max-width: 480px) {
table#canspamBar td {
font-size:14px !important;
}
table#canspamBar td a {
display:block !important;
margin-top:10px !important;
}
}
</style>
</head>
<body>
<table id="mainStructure" style="max-width:930px;" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="deviceWidth" width="342">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="padding-right:30px;padding-bottom:30px;">
<p><span style="color: #36a9e1; font-weight: bold; font-size: 10pt;">Dominic Colenso</span>
</p>
<br>
<p><span style="color: #36a9e1; font-weight: bold; font-size: 10pt;">M</span> <span style="font-size: 10pt; color: #152c46;"><a href="tel:07813925938" style="text-decoration:none;color:#152c46;">+44 (0)7813 925 938</a></span>
</p>
<p><span style="color: #36a9e1; font-weight: bold; font-size: 10pt;">T</span> <span style="font-size: 10pt; color: #152c46;"> <a href="tel:03330504036" style="text-decoration:none;color:#152c46;">+44 (0)3330 50 40 36</a></span>
</p>
<p><span style="color: #36a9e1; font-weight: bold; font-size: 10pt;">E</span> <span style="font-size: 10pt; color: #152c46;"> <a href="mailto:dominic@inflow.global" style="text-decoration:none;color:#152c46;">dominic@inflow.global</a></span>
</p>
<p><span style="color: #36a9e1; font-weight: bold; font-size: 10pt;">W</span> <span style="font-size: 10pt; color: #152c46;"><a href="https://www.inflow.global" target="_blank" style="text-decoration:none;color:#152c46;">https://www.inflow.global</a></span>
</p>
</td>
<td valign="middle">
<img src="https://www.pepperdogdesign.co.uk/images/inflow%20logo_2x.png" width="136" height="104" alt="In Flow Logo">
</td>
</tr>
</table>
</td>
<td width="6" class="deviceWidth noPadding pb20" align="left" style="padding-left:20px;padding-right:20px;">
<img src="https://www.pepperdogdesign.co.uk/images/divider%20desktop_2x.png" class="dividerDesktop" alt="divider%20desktop_2x.png"><img src="https://www.pepperdogdesign.co.uk/images/divider%20mobile_2x.png" class="dividerMobile" alt="divider%20mobile_2x.png">
</td>
<td class="deviceWidth pb20">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="padding-right:20px;">
<span style="color: #36a9e1; font-size: 10pt;">Follow me:</span>
<br><a href="https://twitter.com/dominiccolenso" target="_blank"><img src="https://www.pepperdogdesign.co.uk/images/twitter_2x.png" style="padding-right: 5px; border: 0;" alt="Twitter"></a><a href="https://www.linkedin.com/in/dominiccolenso/" target="_blank"><img src="https://www.pepperdogdesign.co.uk/images/linked%20in_2x.png" alt="LinkedIn" style="border: 0;"></a>
</td>
<td>
<img src="https://www.pepperdogdesign.co.uk/images/dominic_2x.png" alt="Dominic Colenso">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="deviceWidth" style="padding-bottom:20px;" colspan="3">
<a href="http://www.thebookaboutimpact.com/launch" target="_blank"><img src="https://www.pepperdogdesign.co.uk/images/banner%20desktop_2x.png" style="border: 0; max-width: 930px;" width="930" height="202" class="emailImageDesktop" alt="In Flow Banner"></a>
<a href="http://www.thebookaboutimpact.com/launch" target="_blank"><img src="https://www.pepperdogdesign.co.uk/images/banner%20mobile_2x.png" style="border: 0; max-width: 100%;" width="390" height="398" class="emailImageMobile" alt="In Flow Banner"></a>
</td>
</tr>
<tr>
<td class="disclaimerText" style="color:#8995a2;font-size:9pt;font-weight:bold;" colspan="3">
In Flow Training Limited is registered in England and Wales with registered Number: 09111119, having its registered office at 2 Forest Farm Business Park, Fulford, York, YO19 4RH. If you are not the intended recipient of this email, please notify the sender as soon as possible, delete it from your systems and do not disclose its contents to anyone else.
</td>
</tr>
</table>
<center>
<br>
<br>
<br>
<br>
<br>
<br>
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="canspamBarWrapper" style="background-color:#FFFFFF;border-top:1px solid #E5E5E5;">
<tr>
<td align="center" valign="top" style="padding-top:20px;padding-bottom:20px;">
<table border="0" cellpadding="0" cellspacing="0" id="canspamBar">
<tr>
<td align="center" valign="top" style="color:#606060;font-family:Helvetica, Arial, sans-serif;font-size:11px;line-height:150%;padding-right:20px;padding-bottom:5px;padding-left:20px;text-align:center;">
This email was sent to <a href="mailto:*|EMAIL|*" target="_blank" style="color:#404040 !important;">*|EMAIL|*</a>
<br><a href="*|ABOUT_LIST|*" target="_blank" style="color:#404040 !important;"><em>why did I get this?</em></a> <a href="*|UNSUB|*" style="color:#404040 !important;">unsubscribe from this list</a> <a href="*|UPDATE_PROFILE|*" style="color:#404040 !important;">update subscription preferences</a>
<br>*|LIST:ADDRESSLINE|*
<br>
<br>*|REWARDS|*
</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</body>
</html>
Есть идеи, как это сделать?
Заранее спасибо.