Click here to Skip to main content
15,867,939 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
Hello, I am trying to make responsive email signature. It works on some client but gmail does not work at all. And have no idea what I can do more to make it work.

What I have tried:

HTML
<!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>
Posted

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900