As the title suggests, my media queries are being ignored. I'll start off by saying that i know that there are only few email clients that support media queries. But according to several sources, both Gmail and Outlook for android should support media queries.
I've tried various solutions to no avail. Not even this basic code taken from Email on Acid
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Titel</title>
<!--[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
<style>
@media only screen and (max-width:608px){
.test{
display: none !important;
}
}
</style>
</head>
<body style="margin:0;padding:0;min-width:100%;background-color:#ffffff;">
<div style="display:none;font-size:1px;color:#ffffff;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;"></div>
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="min-width: 100%;" role="presentation">
<tr>
<td align="center">
<div class="test">
This should be hidden
</div>
<div>
This should not
</div>
</td>
</tr>
</table>
</body>
</html>
I know that tables and td's are to prefer over div's in html emails, but the results were the same. At first I sent my mails via outlook 2016 but I was afraid it stripped my head tag so I stopped. Everything works fine in web browsers but not in email clients.
EDIT: So I've solved my problem. It was just unfortunate combinations of email client set-up and how I was sending mails.
So for anyone who's lost make sure:
- You don't send your email from outlook, it strips the head tag.
- If you are testing via the gmail app that you use a Gmail account, otherwise it wont show anything from the style tag.