Community Forum

Over the years we have built up a community of email marketers, coders and designers that live and breathe email.

Use the Email on Acid Forum like your virtual water cooler: Stop by to discuss email code, quirky clients and fixes and post your issues (with an example of the code) for our community to offer its assistance.

 
   
Media Queries not working in Apple Mail?

stevebrig

Newbie
Total Posts:  6
Posted: 11 March 2017 03:00 AM

Apple mail in general for me does not seem to be responding to media queries.

When I use them and open them in Apple desktop or mobile mail only the media queries are honoured.
I realize that !important in the media queries will overwrite the inline styles but this is only supposed to happen when the device or desktop app is less than 600px wide.

No matter what I do the table will be yellow on mobile or regular desktop mail. Can anyone shed some light on my issue.

A simple example:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html >
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8” />
<!—[if !mso]><!—>
<meta http-equiv=“X-UA-Compatible” content=“IE=edge” />
<!—<![endif]—>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0” />

<title></title>

<!—[if (gte mso 9)|(IE)]>
<style type=“text/css”>
table {border-collapse: collapse !important;}
</style>
<![endif]—>

<style type=“text/css”>

table[class=“test”] {
    background-color: red;
  }

@media screen and (max-width:600px) {
  table[class=“test”] {
    background-color: yellow !important;
  }
}
<style type=“text/css”>

</head>

<body>

<table class=“test” bgcolor=“red”>
<tr>
<td>test</td>
</tr>
</table>

</body>
</html>


 

marjoleinverheij

Avatar
Jr. Member
Total Posts:  31
Posted: 05 April 2017 02:07 AM
[ # 1 ]

You’re not closing your <style type=“text/css”> tag at the end. It says <style type=“text/css”> again instead of </style>
Hope that solves things!

Cheers,
Marjolein


 

stevebrig

Newbie
Total Posts:  6
Posted: 05 April 2017 02:09 AM
[ # 2 ]

Oh nice catch thank you!


 

stevebrig

Newbie
Total Posts:  6
Posted: 19 May 2017 04:56 AM
[ # 3 ]

Change made and I have tried multiple ways but still no luck with queries.

Can anyone confirm that media queries work in iOS Mail