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

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

Solution

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.sstatic.net/mKmlV.png" style="max-width:50px;height:auto;"  /></td>
    </tr>
  </tbody>
</table>
</body>
</html>

Cheers