I'm using the classic technique to show an img for desktop and hide it for mobile, replacing it with a background image that is designed for a more vertical layout. It's working fine everywhere but the Yahoo app (both iOs and Android). The layout is rearranging correctly so I know it's honoring the media queries (I'm using the extra <head> tag trick, but also tried putting a copy in the <body> and attribute selectors).

CSS:
.mobile-masthead {
width: 100% !important;
background-image: url('https://xxxxxxxxxxxxxx/header-image-mobile.jpg') !important;
background-size: 460px !important;
background-position: top center !important;
background-repeat: no-repeat !important;
height: 248px !important;
}

HTML:
<!-- MASTHEAD -->
<table width="100%" cellpadding="0" cellspacing="0" border="0" align="center" bgcolor="#0a2a41" style="width: 100%; background-color: #0a2a41;">
<tr>
<td class="mobile-masthead" width="100%" align="left" valign="top" bgcolor="#0a2a41" style="padding: 0; margin: 0; width:100%; height: auto;"> 
<img src="https://xxxxxxxxxxxxxxx/header-image.png" alt="Help your students connect to a rewarding future" align="left" valign="top" width="100%" height="auto" style="display: block; margin: 0; padding: 0; width: 100% height: auto; ">
</td>
</tr>
</table>

My guess is it has something to do with the cell being collasped but putting in a &nbsp in the TD only gave me a small height. Any insight would be greatly appreciated!