Member 13785991 Ответов: 0

Проблема с адаптивной подписью электронной почты

Здравствуйте, я пытаюсь сделать отзывчивую подпись электронной почты. Он работает на некоторых клиентах, но gmail не работает вообще. И понятия не имею, что еще я могу сделать, чтобы это сработало.

Что я уже пробовал:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css" media="all">
  @font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 300;
    src: local('Montserrat Light'), local('Montserrat-Light'), url(https://fonts.gstatic.com/s/montserrat/v12/JTURjIg1_i6t8kCHKm45_cJD3gfD_u50.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  @font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 500;
    src: local('Montserrat Medium'), local('Montserrat-Medium'), url(https://fonts.gstatic.com/s/montserrat/v12/JTURjIg1_i6t8kCHKm45_ZpC3gfD_u50.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
body{
  font-family: 'Montserrat', 'Arial', sans-serif;
  margin: 0;
  display: inline-block;
}
@media only screen and (max-width:580px) {
  div[class="container"]{display: block !important;}
  div[class="wrapper"]{display: block !important;max-width:380px;min-width:320px;}
  div[class="image"] img{position: relative !important;top: auto !important;left: auto !important;transform: none !important;-webkit-transform: none !important;}
  div[class="image"]{width: 100%;float: none !important;text-align: center !important;padding: 0 !important;margin-left: 0 !important;min-width: 320px !important;max-width: 480px !important;display: block;clear: both;border-right: none !important;}
  div[class="info"]{width: 100%;float: none !important;text-align: center !important;padding: 0 !important;margin-left: 0 !important;min-width: 320px !important;max-width: 480px !important;display: block;clear: both;}
  div[class="location"]{width: 100%;float: none !important;text-align: center !important;padding: 0 !important;margin-left: 0 !important;min-width: 320px !important;max-width: 480px !important;display: block;clear: both;}
}
@media screen and (-webkit-min-device-pixel-ratio:0) and (max-width:580px) {
  div[class="container"]{display: block !important;}
  div[class="wrapper"]{display: block !important;max-width: 380px;min-width: 320px;}
  div[class="image"] img{position: relative !important;top: auto !important;left: auto !important;transform: none !important;-webkit-transform: none !important;}
  div[class="image"]{width: 100%;float: none !important;text-align: center !important;padding: 0 !important;margin-left: 0 !important;min-width: 320px !important;max-width: 480px !important;display: block;clear: both;border-right: none !important;}
  div[class="info"]{width: 100%;float: none !important;text-align: center !important;padding: 0 !important;margin-left: 0 !important;min-width: 320px !important;max-width: 480px !important;display: block;clear: both;}
  div[class="location"]{width: 100%;float: none !important;text-align: center !important;padding: 0 !important;margin-left: 0 !important;min-width: 320px !important;max-width: 480px !important;display: block;clear: both;}
}
</style>
</head>
<body>
<div class="container">
<div class="wrapper" style="width:100%; display: inline-flex;max-width: 580px; clear:both;">
<div class="image" style="border-right:2px solid #BCBEC0; float:left;padding-right: 30px;position:relative;margin: 5px 0 20px 0px;text-align:center">
  <img src="http://wisdom.events/wp-content/uploads/2018/04/wisdom-events-logo.png" alt="Wisdom.events" style="width:auto;height:auto;max-height: 55px; margin:25px 5% 0 5%;margin-left: 30px;">
</div>
<div style="padding-left: 30px; color:#000;" class="info">
  <p style="font-size: 14px; margin-top:0;"><span style="border-right: 1px solid #000; padding-right:15px; margin-right: 20px;margin-bottom:0; font-weight: 700;">Jovaras Skanas </span><span>Project Manager</span></p>
  <p style="font-size: 10px;margin-bottom:5px; font-weight: 500; margin-top: 10px;"><span style="border-right: 1px solid #000; padding-right:20px; margin-right: 20px;">jovaras@wisdom.events</span><span style="white-space: nowrap;">+37064878797</span></p>
  <p style="font-size: 10px;margin-top:5px; font-weight: 500;margin-bottom: 7px;">www.wisdom.events</p>
  <div>
<a href="https://www.facebook.com/EventsWisdom/" style="text-decoration: none;">
<img src="http://wisdom.events/wp-content/uploads/2018/04/fb.png" alt="Facebook" style="padding-right: 15px; width: 35px; height:35px;">
</a>
<a href="https://www.linkedin.com/company-beta/10171965/admin/updates/" style="text-decoration: none;">
<img src="http://wisdom.events/wp-content/uploads/2018/04/in.png" alt="LinkedIn" style="padding-right: 15px; width: 35px; height:35px;">
</a>
<a href="https://www.youtube.com/channel/UCt6D6OO4SIKvHRoL1q-xNXQ" style="text-decoration: none;">
<img src="http://wisdom.events/wp-content/uploads/2018/04/youtube.png" alt="Youtube" style="padding-right: 15px; width: 35px; height:35px;">
</a>
  </div>
  <p style="font-size: 10px; color:#939598; font-weight: 500; margin-top:5px;">Knowledge. Networking. Partnership</p>
</div>
</div>
</div>
</body>
</html>
<div class="container">
<div class="wrapper" style="width:100%; display: inline-flex;max-width: 580px; background-color:#000; clear:both;">
<div class="image" style="float:left;position:relative;">
  <img src="http://wisdom.events/wp-content/uploads/2018/04/small-mid-scale-lng-logo.png" alt="Wisdom.events" style="width:100%;height:auto;max-width: 145px;max-height: 82px; margin: 15px 10px;">
</div>
<div style="padding-left: 5px; color:#000;text-align:center;margin-left:30px;" class="info">
<a href="https://www.lngsummit.org/" style="text-decoration: none;">
<img src="http://wisdom.events/wp-content/uploads/2018/04/web.png" alt="Website" style="padding: 20px 0;padding-right: 10px; width: 35px; height:35px;">
</a>
<a href="https://twitter.com/LNG_Summit" style="text-decoration: none;">
<img src="http://wisdom.events/wp-content/uploads/2018/04/twitter.png" alt="Twitter" style="padding: 20px 0;padding-right: 10px; width: 35px; height:35px;">
</a>
<a href="https://www.facebook.com/LNGSummit" style="text-decoration: none;">
<img src="http://wisdom.events/wp-content/uploads/2018/04/fb-1.png" alt="Facebook" style="padding: 20px 0;padding-right: 10px; width: 35px; height:35px;">
</a>
<a href="https://www.linkedin.com/showcase/10171178/" style="text-decoration: none;">
<img src="http://wisdom.events/wp-content/uploads/2018/04/in-1.png" alt="LinkedIn" style="padding: 20px 0;padding-right: 10px; width: 35px; height:35px;">
</a>
<a href="https://www.youtube.com/channel/UCt6D6OO4SIKvHRoL1q-xNXQ" style="text-decoration: none;">
<img src="http://wisdom.events/wp-content/uploads/2018/04/youtube-1.png" alt="Youtube" style="padding: 20px 0;padding-right: 10px; width: 35px; height:35px;">
</a>
</div>
<div class="location" style="float:right;padding-right: 10px;position:relative;text-align:right;margin-left:30px;">
  <p style="font-size: 12px;margin-top:19px; font-weight: 500; color:#fff;margin-bottom:0;">12 June, 2018</p>
  <p style="font-size: 12px;margin-top:5px; font-weight: 500; color:#D66853;">Paris, France</p>
</div>
</div>
</div>

0 Ответов