Написал такой код подписи 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 отступ между элементами.
Прошу помочь с адаптацией этой подписи, или может посоветуете как лучше сделать исходя из моего кода.
p img { padding-right: px; }
, медиазапросы@media
,opacity
?