Здравствуйте,знатоки!
Проблема такая,верстал html-письмо и выглядит оно на пк-версии хорошо,на мобилке в mail.ru тоже,а вот в 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" />
<title>HTML Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,700;1,400;1,500&display=swap');
body {
width: 100% !important;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
margin: 0;
padding: 0;
line-height: 100%;
}
[style*="Montserrat"] {font-family: 'Montserrat', arial, sans-serif !important;}
img {
outline: none;
text-decoration: none;
border:none;
-ms-interpolation-mode: bicubic;
max-width: 100%!important;
margin: 0;
padding: 0;
display: block;
}
table td {
border-collapse: collapse;
}
table {
border-collapse: collapse;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
.menu a{
font-weight: bold;
font-size: 14px;
line-height: 40px;
align-items: center;
text-align: center;
letter-spacing: 0.065em;
text-transform: uppercase;
color: #FFFFFF;
text-decoration: none;
}
.menu-td {
padding-bottom:188px;
padding-right: 20px;
padding-left: 20px;
}
.sales-description p {
font-family: Montserrat;
font-style: normal;
font-weight: normal;
font-size: 30px;
line-height: 40px;
/* or 133% */
letter-spacing: 0.065em;
color: #000000;
}
.logo-sales img {
padding-left:43px;
padding-bottom:23px;
padding-top:23px;
}
.table-500-text{
padding-left:57px;
padding-right:53px;
padding-top:90px;
padding-bottom:175px;
}
.table-500-text {
font-family: Montserrat;
font-style: italic;
font-weight: normal;
font-size: 18px;
line-height: 34px;
/* or 192% */
letter-spacing: 0.025em;
}
.button-img{
padding-bottom: 30px;
}
.button-img img{
border-radius: 5px;
}
.footer-menu-td p{
padding-top: 22px;
font-family: Montserrat;
font-style: normal;
font-weight: normal;
font-size: 14px;
line-height: 34px;
/* or 246% */
text-align: center;
letter-spacing: 0.025em;
color: #FFFFFF;
}
.footer-menu-td img{
padding-bottom: 30px;
}
@media screen and(max-width:420px) {
.table-600{
width:300px !important;
}
.table-500-wrapper{
width:250px !important;
}
}
</style>
</head>
<body style="margin: 0; padding: 0;">
<div style="font-size:0px;font-color:#ffffff;opacity:0;visibility:hidden;width:0;height:0;display:none;">Тестовое письмо</div>
<table cellpadding="0" cellspacing="0" width="100%" background="https://i.yapx.ru/IQjSF.png" style="background-size:582px;">
<tr>
<td>
<table class="main table-600" cellpadding="0" cellspacing="0" width="600px" align="center" >
<tr>
<td height="60" width="600"></td>
</tr>
<tr>
<td class="header-td">
<table class="table-500-wrapper" cellpadding="0" cellspacing="0" width="600" height="520" align="center" background= "https://i.yapx.ru/IQjSC.jpg" style="border-radius: 10px 10px 0px 0px;" >
<tr>
<td>
<table class=" table-500" cellpadding="0" cellspacing="0" width="500" align="center" >
<tr>
<td class="menu" align="center">
<table cellpadding="0" cellspacing="0">
<tr>
<td class="menu-td">
<a href="https://www.boogie-shop.ru/catalog/bongi" style="font-family: Arial, Helvetica, sans-serif, 'Montserrat';">Бонги</a>
</td>
<td class="menu-td">
<a href="https://www.boogie-shop.ru/catalog/trubki" style="font-family: Arial, Helvetica, sans-serif, 'Montserrat';">Трубки</a>
</td>
<td class="menu-td">
<a href="https://www.boogie-shop.ru/catalog/samokrutki" style="font-family: Arial, Helvetica, sans-serif, 'Montserrat';">Бумажки</a>
</td>
<td class="menu-td">
<a href="https://www.boogie-shop.ru/catalog/vaporayzery" style="font-family: Arial, Helvetica, sans-serif, 'Montserrat';">Вапорайзеры</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="banner-td" bgcolor="#FBF200">
<table class="table-500" cellpadding="0" cellspacing="0" width="600" height="148">
<tr>
<td align="left" class="logo">
<table class="table-600" cellpadding="0" cellspacing="0" width="100" height="102">
<tr>
<td class="logo-sales">
<img src="https://i.yapx.ru/IQjSL.png" alt="" width="100" height="102" />
</td>
</tr>
</table>
</td>
<td align="center" class="sales-description" >
<table class="table-500" cellpadding="0" cellspacing="0" width="376" height="97" align="center" style="font-family: Arial, Helvetica, sans-serif, 'Montserrat';">
<tr>
<td>
<p>Летняя распродажа<br />в Boogie Shop</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="text-content" bgcolor="#FFFFFF">
<table class="table-500-text" cellpadding="0" cellspacing="0" width="600" height="485" align="center">
<tr>
<td align="center">
<table class="table-500-size" cellpadding="0" cellspacing="0" width="480" height="265" align="center" >
<tr>
<td>
<p class="hello" style="font-family: Arial, Helvetica, sans-serif, 'Montserrat'; font-style: italic;">Друзья, привет!</p>
<p style="font-family: Arial, Helvetica, sans-serif, 'Montserrat'; font-style: normal;">С 22 по 26 июля покупайте любые девайсы и аксессуары со скидкой <i>до 30%</i> — сделайте свой<br /> летний отдых ярче и приятней с <i>Boogie Shop!</i></p>
<p style="font-family: Arial, Helvetica, sans-serif, 'Montserrat'; font-style: normal;">Скидки действуют на все товары в<br /> интернет-магазине, а также в <a href="https://www.boogie-shop.ru/shop">офлайн-магазинах</a> Boogie Shop в Москве и Санкт-Петербурге.</p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="button-img" align="center" >
<a href="https://www.boogie-shop.ru/">
<img src="https://i.yapx.ru/IQjSD.png" alt="К покупкам" width="280px" height="60px" style="padding-bottom: 22px;"/>
</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="footer-td" bgcolor="#595D64" style="border-radius: 0px 0px 10px 10px;">
<table class="table-500" cellpadding="0" cellspacing="0" width="600" height="150" align="center">
<tr>
<td class="footer-text" align="center">
<p style="font-family: Arial, Helvetica, sans-serif, 'Montserrat'; font-style: normal; color: #FFFFFF; padding-top: 22px;">Мы в социальных сетях</p>
</td>
</tr>
<tr>
<td class="footer-menu-td" align="center">
<table class="table-500" cellpadding="0" cellspacing="0" width="180" align="center">
<tr>
<td align="center">
<a href="https://www.instagram.com/boogieshop.ru/">
<img src="https://i.yapx.ru/IQjSJ.png" alt="Instagram" width="50" height="50" />
</a>
</td>
<td align="center">
<a href="https://vk.com/boogieshop_ru">
<img src="https://i.yapx.ru/IQjSI.png" alt="Telegram" width="50" height="50" />
</a>
</td>
<td align="center">
<a href="https://t.me/boogieshop">
<img src="https://i.yapx.ru/IQjSK.png" alt="Vk" width="50" height="50" />
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="60" width="600"></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Простой
Средний