I have integrated media queries into my backend (Node) email system to display different content based on whether the email is opened on a phone or desktop. Strangely, the media query works properly when the email is opened in a native app (like Yahoo's native app) on a phone, but not when opened in a non-native mobile app or when accessing Yahoo Mail from Google on a phone.
What could be causing this issue? How can I resolve it?
<head>
<style>
a[class=desktopLink] {
...
}
@media (max-device-width: 480px) {
a[class=mobileLink] {
display: flex !important;
...
}
a[class=desktopLink] {
display: none !important;
}
}
</style>
</head>
<body>
<div>
<a class="mobileLink" style="display:none;>Account Activation MOBILE</a>
<a class="desktopLink">Account Activation Desktop</a>
</div>