1

Написал такой код подписи html письма:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
  <link href="https://fonts.googleapis.com/css?family=Roboto:400,500" rel="stylesheet">
  <title>Sign</title>
</head>

<body>
  <style>
    body {
      font-family: 'Roboto', sans-serif;
    }
    
    table {
      width: 100%;
      border-spacing: 0px;
      border-collapse: collapse;
    }
    
    table {
      border-spacing: 0;
      border-width: 0;
    }
    
    table td {
      padding: 0px;
      border-width: 0;
    }
    
    tr {
      padding: 0;
    }
    
    p {
      margin: 0;
      padding: 0;
      font-size: 15px;
      opacity: 0.54;
    }
    
    .second a {
      text-decoration: none;
      color: #000000;
      font-size: 17px;
    }
    
    .second p {
      opacity: 1;
    }
    
    #name {
      font-size: 24px;
      font-weight: 500;
      opacity: 1;
    }
    
    #website {
      color: #3EA7DE;
      text-decoration: underline;
    }
    
    #separator {
      width: 1px;
      height: 82px;
      background-color: #000000;
    }
    
    .first {
      width: 200px;
      padding-left: 8px;
    }
    
    .second {
      padding-left: 15px;
    }
    
    img {
      height: auto;
      max-height: 106px;
      max-width: 100%;
    }
    
    p img {
      padding-right: px;
    }
    
    @media screen and (max-width: 425px) {
      .first {
        width: 160px;
      }
      .second {
        padding-left: 4px;
      }
      #name {
        font-size: 20px;
      }
      p {
        font-size: 12px;
      }
      p img {
        padding-right: 10px;
      }
      .second a {
        font-size: 12px;
      }
    }
  </style>
  <table id="table" cellpadding="0" cellspacing="0">
    <tr>
      <td class="first" cellspacing="0" cellpadding="0">
        <p id="name"> Name Surname</p>
      </td>
      <td rowspan=3 id="separator"></td>
      <td class="second">
        <p id="tel"><img src="https://anyway.website/d/Vector-2.svg" alt="Sign" style="height: 14px; padding-left: 2px;">+808000080</p>
      </td>
    </tr>
    <tr>
      <td class="first" cellspacing="0">
        <p id="position"> Position</p>
      </td>
      <td class="second">
        <p id="skype"><img src="https://anyway.website/d/Vector.svg" alt="Sign" style="height: 14px;">Second</p>
      </td>
    </tr>
    <tr>
      <td class="first" cellspacing="0">
        <p id="company"> Company Name</p>
      </td>
      <td class="second"><img src="https://anyway.website/d/Vector-1.svg" alt="Sign" style="height: 14px;"><a href="//websitename.com" id="website"> websitename.com</a></td>
    </tr>
    <tr>
      <td colspan="3">
        <a href="http://websitename.com"><img src="https://anyway.website/d/sign.svg" alt="Sign"></a>
      </td>
    </tr>
  </table>
</body>

</html>

Как задать отступы между текстом и иконками ? В мобильной версии когда отправляешь на почту, размер строки увеличивается, а должен быть по высоте текста и 5px отступ между элементами.

Прошу помочь с адаптацией этой подписи, или может посоветуете как лучше сделать исходя из моего кода.

3
  • А все остальное работает, именно в почтовом клиенте и именно на телефоне? Просто интересуюсь. Гугл шрифт, вот эта строка p img { padding-right: px; }, медиазапросы @media, opacity?
    – SVE
    4 фев 2019 в 16:56
  • Media нет, узнал что он не поддерживается более чем половиной почтовых клиентов
    – ccxdec
    5 фев 2019 в 16:57
  • как и все остальное, campaignmonitor.com/css
    – SVE
    5 фев 2019 в 17:05

1 ответ 1

1

Как вариант, можно сделать таблицу внутри ячейки и задать фиксированную ширину ячеек с иконками.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
  <link href="https://fonts.googleapis.com/css?family=Roboto:400,500" rel="stylesheet">
  <title>Sign</title>
</head>

<body>
  <style>
    body {
      font-family: 'Roboto', sans-serif;
    }
    
    table {
      width: 100%;
      border-spacing: 0px;
      border-collapse: collapse;
    }
    
    table {
      border-spacing: 0;
      border-width: 0;
    }
    
    table td {
      padding: 0px;
      border-width: 0;
    }
    
    tr {
      padding: 0;
    }
    
    p {
      margin: 0;
      padding: 0;
      font-size: 15px;
      opacity: 0.54;
    }
    
    .second a {
      text-decoration: none;
      color: #000000;
      font-size: 17px;
    }
    
    .second p {
      opacity: 1;
    }
    
    #name {
      font-size: 24px;
      font-weight: 500;
      opacity: 1;
    }
    
    #website {
      color: #3EA7DE;
      text-decoration: underline;
    }
    
    #separator {
      width: 1px;
      height: 82px;
      background-color: #000000;
    }
    
    .first {
      width: 200px;
      padding-left: 8px;
    }
    
    .second {
      padding-left: 15px;
    }
    
    img {
      height: auto;
      max-height: 106px;
      max-width: 100%;
    }
    
    p img {
      padding-right: px;
    }
    
    @media screen and (max-width: 425px) {
      .first {
        width: 160px;
      }
      .second {
        padding-left: 4px;
      }
      #name {
        font-size: 20px;
      }
      p {
        font-size: 12px;
      }
      p img {
        padding-right: 10px;
      }
      .second a {
        font-size: 12px;
      }
    }
  </style>
  <table id="table" cellpadding="0" cellspacing="0">
    <tr>
      <td class="first" cellspacing="0" cellpadding="0">
        <p id="name"> Name Surname</p>
      </td>
      <td rowspan=3 id="separator"></td>
      <td class="second">
        <table>
            <tr>
              <td width="25"><img src="https://anyway.website/d/Vector-2.svg" alt="Sign" style="height: 14px; padding-left: 2px;"></td>
              <td>+80808080</td>
            </tr>
          </table>
      </td>
    </tr>
    <tr>
      <td class="first" cellspacing="0">
        <p id="position"> Position</p>
      </td>
      <td class="second">
        <table>
          <tr>
            <td width="25"><img src="https://anyway.website/d/Vector.svg" alt="Sign" style="height: 14px;"></td>
            <td>Nevermind</td>
          </tr>
        </table>
      </td>
    </tr>
    <tr>
      <td class="first" cellspacing="0">
        <p id="company"> Company LTD</p>
      </td>
      <td class="second">
        <table>
          <tr>
            <td width="25"><img src="https://anyway.website/d/Vector-1.svg" alt="Sign" style="height: 14px;"></td>
            <td><a href="//website.com" id="website"> website.com</a></td>
          </tr>
        </table>
      </td>
    </tr>
    <tr>
      <td colspan="3">
        <a href="http://website.com"><img src="https://anyway.website/d/sign.svg" alt="Sign"></a>
      </td>
    </tr>
  </table>
</body>

</html>

1
  • только этот отступ в 5px тоже ячейкой обычно делается
    – SVE
    4 фев 2019 в 16:43

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.