I have encountered an issue while sending an email from a PHP file to a Gmail account. The code I am using consists of basic HTML and CSS. Interestingly, the email looks perfect on desktop devices with all styles applied correctly. However, when viewed on mobile devices (both app and browser), the styles seem to be stripped off as if the internal CSS is being removed.
Even after trying out Google's sample code:
<html>
<head>
<style>
.colored {
color: blue;
}
#body {
font-size: 14px;
}
@media screen and (min-width: 500px) {
.colored {
color:red;
}
}
</style>
</head>
<body>
<div id='body'>
<p>Hi Pierce,</p>
<p class='colored'>
This text is blue if the window width is
below 500px and red otherwise.
</p>
<p>Jerry</p>
</div>
</body>
</html>
And here are the headers that I'm including in the email:
$headers = "MIME-Version: 1.0" . "\r\n";
$headers .= "From: Optimization Manager <<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="72xxx5xx2xyxxxxxxxxx5xxxxx625xx65592d7daxxx5xx2xy002dd5728c8c">[email protected]</a>>" . "\r\n" .
$headers .= "Content-type:text/html;charset=UTF-8" . "\r\n";
Despite trying different approaches, even this setup doesn't seem to work as expected.
Any insights or solutions you could provide on this matter?