Вёрстка HTML подписи, размер элементов

153

19 сентября 2019, 03:30

Написал такой код подписи 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 отступ между элементами.

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

Answer 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>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

width: 100% не корректно работает

Сайт https://dwimarketingru шапка имеет position: fixed; и width: 100% и в мобильной версии она растягивается в ширину больше, чем ширина экрана, хотя body и html имеют...

136

HTML