Yahoo Mail & Gmail App not rendering height property in media query

Question

I'm trying to build an EDM for my client and I want the height of an elment to update on mobile but it seems that specifically the height attribute doesn't take on Yahoo Mail App for iOS and Gmail App for Android.

My style tag and media queries are both in the head and body section of the HTML file. The background-color works so I know that the email is referencing the style tag but the height is staying at 50px and not updating to 10px on mobile.

Style tag:

<style>
@media only screen and (max-width:600px){
.mobile-height-10{ background:green !important; max-height:10px !important; min-height:10px !important; height:10px !important; }
}
</style>

HTML here:

<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#f2f2f2" align="center" id="edmTable" style="width:100%;padding:0;margin:0;border:none;outline:0;">

  <tr>
    <td>
      <table width='100%' border='0' cellspacing='0' cellpadding='0' bgcolor='#f4f4f4' align='center' class='full-width' style="width:100%;min-width:100%;background-color:#f4f4f4;">
        <tr>
          <td align="center">
            <table width='600' border='0' cellspacing='0' cellpadding='0' align='center' bgcolor='#f4f4f4' class='mobile-full-width' style="width:600px;background:#f4f4f4;">
              <tr>
                <td width="100%" height="50" style="font-size:1px; line-height:0px;min-height:50px;min-width:100%;" class="mobile-height-10">&nbsp;</td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
  </tr>

  </table>

As I understand it, the height property should work fine in media queries: https://www.campaignmonitor.com/css/media-queries/min-height/

Does any body have any insight they can share with me as to why this isn't working as expected?

Your help is much appreciated
Moe

the media query is not working on Web Email client, web email client usually requires inline styles. — Wils, Mar 26 '18 at 04:31
@Wils How can I target mobile with inline styles? Could I trouble you to show me an example? — Moe-Joe, Mar 26 '18 at 05:29
try reducing the max screen size to 480, replace ` ` with `‌` for the td with class `mobile-height-10`. That might take care of Gmail, for Yahoo the media query has to be in the body of the email. — Syfer, Mar 26 '18 at 05:30
@Syfer The style/media queries are in the body of the HTML. I'll have a look at those other suggestions you offered. What do you mean by reducing the max screen size to 480? — Moe-Joe, Mar 26 '18 at 05:31
Mobile screensizes are smaller, if you are targetting bigger screens (tablets) then 600 will work. Also Gmail doesnt like styles in the body of the email, it has to be in the head. Gmail compiler is very strict. — Syfer, Mar 26 '18 at 05:37
@david.lucky emails with media queries have come a long way from being inlined/restricted. My working example answers OP's question. — Syfer, Mar 26 '18 at 05:45

Syfer · Accepted Answer · 2018-03-26T06:24:52.007

1

Here is a working example from your code. I just tested it and it works on both Gmail app (media query in head) and Yahoo (media query in body).

I have not changed the media query as you have a reason to keep it at 600px.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1" />
 <title>title</title>
 <style type="text/css">
 @media only screen and (max-width:600px){
.mobile-height-10 img{width:10px !important; height:10px !important;background-color:green !important;}
}

    </style>
</head>
<body bgcolor="#ffffff" class="body" dir="ltr" style="padding:0; margin:0; display:block; background:#ffffff; -webkit-text-size-adjust:none">
<style type="text/css">@media only screen and (max-width:600px){
.mobile-height-10 img{width:10px !important; height:10px !important;background-color:green !important;}
}
 </style>
<table align="center" bgcolor="#f4f4f4" border="0" cellpadding="0" cellspacing="0" class="mobile-full-width" style="background:#f4f4f4;">
  <tbody>
    <tr>
      <td bgcolor="#ff0000" class="mobile-height-10" style="line-height:0px;"><img src="https://i.stack.imgur.com/mKmlV.png" style="max-width:50px;height:auto;"  /></td>
    </tr>
  </tbody>
</table>
</body>
</html>

Cheers

edited Mar 26 '18 at 06:24

answered Mar 26 '18 at 05:42

Syfer

4,262
3
20
37

Thanks for your time. I have copied your code verbatim into campaign monitor and sent it through. Same issue still persists. How did you test to confirm? – Moe-Joe Mar 26 '18 at 05:50
I tested it on my Gmail app (android) and yahoo app (android). Botyh red backgrounds changed to green on both apps – Syfer Mar 26 '18 at 05:51
Thanks. The issue is on Yahoo on iOS. The issue is still present on gmail app on Samsung galaxy note 5. I mentioned in my post that the background color works as expected. Its the height that is the issue. – Moe-Joe Mar 26 '18 at 05:55
1

Try this new code. I added an image inside the td to see how it would work. I managed to get it working for Gmail app and Yahoo. I had to remove your heights on the td's though. – Syfer Mar 26 '18 at 06:25
There are some limitations, namely, it does not work with percentage widths, but in my case where the block element is a solid colour, this solution works. I'll test on email on acid and update my post with my findings. Thanks. – Moe-Joe Mar 27 '18 at 00:39

Yahoo Mail & Gmail App not rendering height property in media query

1 Answers1