Email template td not stacking for mobile? - html

Question

I am trying to stack two table cells under each other when the email template is viewed on mobile. Although the code works when viewing the email in the browser, it doesn't within mobile email clients?
How can I make the table stack for mobile layout?
Media Query:
#media only screen and (max-width: 600px) {
*[class=hero-block] {
width: 100%;
display: block !important;
text-align: center;
clear: both;
}
}
HTML:
<table bgcolor="000000" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td class="hero-block">
<img src="hero.jpg" height="265" width="245" />
</td>
<td class="hero-block" width="295">
<table bgcolor="000000" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="left">
<font color="#ffffff" face="Arial,Verdana,sans-serif" size="1" style="font-size: 22px; line-height: 22px;">Thanks for signing up</font>
</td>
</tr>
<tr>
<td>
<img style="display: block; border:0; margin: 0; padding: 0;" src="x.gif" height="20" width="1" alt="x" />
</td>
</tr>
</table>
</td>
</tr>
</table>

Answer 1

TD's have stopped stacking in Android for quiet sometime now. A walkaround is to use TH instead, which works on both Android and iOS. Try out my code below in a test email:
#media only screen and (max-width: 600px) {
*[class=hero-block] th{
width: 100%;
display: block !important;
text-align: center;
clear: both;
}
}
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="hero-block">
<tr>
<th align="left" style="font-weight:normal;" bgcolor="#000000">
<font color="#ffffff" face="Arial,Verdana,sans-serif" size="1" style="font-size: 22px; line-height: 22px;">Thanks for signing up</font>
</th>
<th align="left" style="font-weight:normal;" bgcolor="#ffffff">
<font color="#000000" face="Arial,Verdana,sans-serif" size="1" style="font-size: 22px; line-height: 22px;">Thanks for signing up</font>
</th>
</tr>
</table>
When using this code be sure to use font-weight as normal otherwise your text inside the block will be bold.
Cheers