iOS Outlook App only allowing a single media query in HTML email

Question

I am wanting to change the font size of some text in an HTML email at 2 different screen widths with media queries. This works as expected on all devices/clients except in Outlook App for iOS.

Here is an example of the inline HTML:

<td class="para" align="left" style="border-collapse: collapse; mso-line-height-rule: exactly; font-family: Times, 'Times New Roman', serif; font-size: 17px; color: #333333; line-height: 24px; text-align: left; text-indent: 29px; padding: 20px 0 0 0;"><span style="font-family: Times, 'Times New Roman', serif !important;">some text here</span></td>

Then I have the following CSS:

<style>
@media only screen and (max-width:600px) {
.para {
    font-size: 18px !important;
}
}
@media only screen and (max-width:445px) {
  .para {
    font-size: 20px !important;
}
}
</style>

If I only have one of the media queries, it works as expected in the Outlook App for iOS, but when I add the second one it no media queries work at all.

Am I doing something wrong or is this just something that you have to work around with iOS Outlook?

Answer 1

The issue is due to a bug in their implementation, as documented here: https://github.com/hteumeuleu/email-bugs/issues/92

The easiest solution, since perhaps your minifying code may be removing whitespace and creating the double curly braces, }}, is to close the style block and start a new one, i.e.:

<style>
@media only screen and (max-width:600px) {
.para {
    font-size: 18px !important;
}
}
</style>
<style>
@media only screen and (max-width:445px) {
  .para {
    font-size: 20px !important;
}
}
</style>