Check out this HTML email template code we've been testing on various email clients including Gmail, Yahoo, Outlook, Rediffmail, iPhone, and iPad.
The template consists of two table blocks - one for web browsers and the other for mobile devices like iPhone and iPad.
However, when using this code, Gmail displays both blocks, while Yahoo and Outlook show only the mobile block. On iPhone and iPad, only the mobile block is visible.
The @media queries seem to be malfunctioning in this scenario.
Any suggestions on how to resolve this issue would be greatly appreciated!
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Weekly</title>
<style type="text/css">
#web{
display: inline-block;
}
#mobile{
display: none;
}
</style>
<style>
@media only screen and (max-device-width: 480px) {
#web{
display: none;
}
#mobile{
display: inline-block;
}
}
</style>
</head>
<body>
<table id="web">
<tr>
<td>
aditya on web
</td>
</tr>
</table>
<table id="mobile">
<tr>
<td>
aditya on mobile
</td>
</tr>
</table>
</body>
</html>