Я создал отзывчивую почтовую программу, которая должна работать в gmail, но когда я проверяю почту в своем мобильном приложении gmail, она не работает .... похоже, что медиа-запросы игнорируются gmail. Я вставил всюкод ниже вы можете посмотреть на это.Когда я проверил на отзывчивость в моем эмуляторе веб-браузера, он работает нормально, но в приложении Gmail медиа-запросы игнорируются.спасибо
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mailer</title>
<style>
.centertab {
width: 650px;
}
@media screen and (max-width:480px) {
.centertab,
table,
tb,
th,
tr {
width: 100% !important;
}
p {
padding: 0 10px 0 10px;
}
td {
width: 100% !important;
height: auto !important;
display: block !important;
text-align: center;
}
img {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
}
.social {
width: 30px !important;
max-width: 30px !important;
height: auto !important;
}
h1,
h2,
h3 {
font-size: 18px;
}
}
</style>
</head>
<body style="margin: 0; padding: 0">
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="background-color: darkgrey">
<tr>
<td>
<table class="centertab" border="0" cellspacing="0" cellpadding="0" align="center" style="background-color: white; margin-top: 40px">
<tr>
<td>
<!-- Header with company logo -->
<table width="100%">
<tr>
<td align="center">
<h1>Company Name</h1>
</td>
</tr>
</table>
<!--Banner -->
<table width="100%">
<tr>
<td style="width: 650px">
<img src="images/banner.jpeg">
</td>
</tr>
</table>
<table width="100%">
<tr>
<td align="center">
<h2 style="margin-top: 0; margin-bottom: 0">Text title</h2>
</td>
</tr>
</table>
<table width="100%" style="background-color: aqua;">
<tr>
<td>
<img src="images/1.jpeg" style="width: 300px;">
</td>
<td>
<p style="text-align: center; line-height: 1.3; padding: 10px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed convallis justo. Mauris egestas sed quam ultricies efficitur. Praesent pulvinar lorem quis ex lacinia, eu lacinia ipsum ornare. Proin hendrerit eros sed leo feugiat accumsan. Donec semper tincidunt interdum. Nullam non aliquet urna.Etiam efficitur velit id eros ullamcorper, vel elementum lorem scelerisque. </p>
</td>
</tr>
</table>
<table width="100%" style="background-color: blanchedalmond;">
<tr>
<td style="width: 300px">
<p style="text-align: center; line-height: 1.3; padding: 10px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed convallis justo. Mauris egestas sed quam ultricies efficitur. Praesent pulvinar lorem quis ex lacinia, eu lacinia ipsum ornare. Proin hendrerit eros sed leo feugiat accumsan. Donec semper tincidunt interdum. Nullam non aliquet urna.Etiam efficitur velit id eros ullamcorper, vel elementum lorem scelerisque. </p>
</td>
<td align="right">
<img src="images/2.jpeg" style="width: 300px;">
</td>
</tr>
</table>
<table style="background-image: url(images/banner2.jpeg); width: 100%; height: 210px">
<tr>
<td align="center">
<h3 style="color: white"><span style="background-color: blue">Text With title</span></h3>
<h3 style="color: white"><span style="background-color: red">Some Text</span></h3>
</td>
</tr>
</table>
<table width="100%">
<tr>
<td> </td>
</tr>
</table>
<table width="100%">
<tr class="socialicons">
<td>
<table width="200px">
<td>
<img src="images/fb.png" class="social" style="width: 30px;">
</td>
<td>
<img src="images/google.png" class="social" style="width: 30px;">
</td>
<td>
<img src="images/linkedin.png" class="social" style="width: 30px;">
</td>
<td>
<img src="images/twitter.png" class="social" style="width: 30px;">
</td>
</table>
</td>
<td>
<table width="300px">
<tr align="right">
<td>Company Name</td>
</tr>
</table>
</td>
</tr>
</table>
<table width="100%">
<tr>
<td> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
заранее