I am trying to develop mail in html and css (emails can only be developed in this). Is there a reason Gmail no longer supports Media Queries? A paragraph that I defined on the desktop that will be centered and on mobile will be with alighn left, in practice also centered on the desktop version (set in media query). In addition, I have two images, one of which is supposed to be displayed in the desktop version and the other in the mobile version, in practice only the image of the mobile version is displayed. I will note that in other mail clients it does work, only in Gmail it does not work. I would be happy for your help please, as it has worked for me in the past and now no longer. And if Media Query is really not possible with Gmail, how can it be otherwise? My code is attached:
<!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" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name=”x-apple-disable-message-reformatting”>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<title></title>
<style type="text/css">
body{
Margin: 0;
padding: 0;
min-width: 100%;
background-color: #F3F3F3;
font-family: 'Poppins', Helvetica, Arial, sans-serif;
}
table{
border-spacing: 0;
}
td{
padding: 0;
}
img{
border: 0;
}
@media screen and (min-width: 600px) {
.desktop-img{
display: block!important;
}
.mobile-img{
display: none!important;
}
}
@media screen and (max-width: 600px) {
p{
margin: 3.75rem 1.875rem 1rem 1.875rem!important;
text-align: left!important;
}
.desktop-img{
display: none!important;
overflow: hidden!important;
}
.mobile-img{
display: block!important;
overflow: visible!important;
}
}
</style>
<!--[if mso]>
<style>
body{
font-family: Helvetica, Arial, sans-serif!important;
text-align: center!important;
display: inline-block!important;
}
table{
border-collapse: collapse!important;
}
</style>
<![endif]-->
</head>
<body>
<div style="width: 100%; table-layout: fixed; background-color: #F3F3F3; padding-bottom: 20px; text-align: center;-webkit-text-size-adjust:none;">
<table style="background-color: white; margin: 0 auto; width: 100%; max-width: 600px; color: #0C0E1A; border-spacing: 0; padding-bottom: 20px;direction: ltr;" role="presentation" width="100%" align="center">
<tr>
<td>
<!-- body text -->
<p style="margin: 70px 40px 40px 40px; text-align: center; font-weight: 500; font-size: 20px; line-height: 30px;color: #3958FF;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</td>
</tr>
<tr>
<td>
<!-- Desktop Image -->
<img class="desktop-img" src="https://images.easytechjunkie.com/desktop-computer-and-screen.jpg" alt="desktop" style="width: 90%;"/>
<!-- Mobile Image -->
<img class="mobile-img" src="https://d124ep1ou7ef1k.cloudfront.net/wp-content/uploads/2022/03/Galaxy_A53_5G_MA_Thumb.jpg" alt="mobile" style="width: 100%;display: none;"/>
</td>
</tr>
</table>
</table>
</div>
</body>
</html>