HTML Email on Gmail App not rendering - html

Question

Been building a responsive HTML/CSS email and have managed to use all the tricks I know to make it work in most places... but I'm currently having real issues with the Gmail app (on a HTC One Mini 2, if it makes a difference).
What it should do (roughly) is this:
http://s21.postimg.org/7aw1izuxj/shoulddo.png
What it does do is this: s4.postimg.org/g9dm9t68d/isdo.png
(Ignore the weird colouring - it helps me debug)
The code which does this is:
<table class="cooptwocol" style="background-color: red; border-collapse: collapse;" cellspacing="0" cellpadding="0">
<tr>
<td>
<table class="coophalfwidth" align="left" style="width: 300px; background-color: #f2f2f2; border-collapse: collapse;" cellspacing="0" cellpadding="0">
<tr>
<td><img src="300x300.jpg" width="300px"></td>
</tr>
</table>
<!--[if mso]></td><td><![endif]-->
<table class="coophalfwidth" align="left" style="width:300px; background-color: #f2f2f2; border-collapse: collapse;" cellspacing="0" cellpadding="0">
<tr>
<td style="width: 15px; font-size: 15px; background-color: blue;" valign="top" rowspan="7"> </td>
<td colspan="3" style="font-size: 15px;"> </td>
<td style="width: 15px; font-size: 15px; background-color: blue;" valign="top" rowspan="7"> </td>
</tr>
<tr>
<td colspan="3" style="font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 24px; font-weight: bold; color: #000000;">Title One</td>
</tr>
<tr>
<td colspan="3" style="font-size: 15px;"> </td>
</tr>
<tr>
<td colspan="3" style="font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; color: #000000;">Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Vestibulum ac hendrerit nibh, ac efficitur libero. Mauris dapibus ante non urna varius dignissim. Phasellus eget finibus orci. Morbi vel dictum turpis. In finibus hendrerit
nisi eu accumsan. In nec ante, sed scelerisque eros. In accumsan rhoncus.</td>
</tr>
<tr>
<td colspan="3" style="font-size: 15px;"> </td>
</tr>
<tr>
<td><img src="ctaleftgrey.jpg" style="border: 0; text-decoration: none;" align="right"></td>
<td style="font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; background-color: #ec6608;">Call to action</td>
<td><img src="ctarightgrey.jpg" style="border: 0; text-decoration: none;" align="left"></td>
</tr>
<tr>
<td colspan="3" style="font-size: 15px;"> </td>
</tr>
</table>
</td>
</tr>
</table>
(No point in posting the CSS for the classes as the Gmail app ignores them anyway!)
I've tried everything I can think of and nothing is helping to get these blocks lined up in the Gmail app - resizing image part, resizing text part, nesting further tables, mucking about with background colours... And now I'm out of ideas!
Any help gratefully appreciated! Long-time user, first time poster on StackOverflow :)
********EDIT********
OK, so much tweaking later... it's improved a lot, it's just not aligning correctly...
See image here: http://s16.postimg.org/kzm0gd4k5/Screenshot_2015_08_07_10_43_18.png
It's like that because I have to left align the first nested table (the left column, displaying as the first block in the image) and right align the second (the right column, bottom section of image), but I was wondering if there's another way to do that which isn't going to mess it up on the Gmail app?

Answer 1

So I discovered that it's all because of the Gmail app's "Auto-resize" or "Auto-fit" options!
The solution was to add a "min-width: 620px" (the size of my widest bit of email) to any 620px full width part.
Sometimes it's just finding the right thing to search for is what helps :)
Source: https://litmus.com/community/discussions/257-gmail-app-android-how-to-stop-text-from-auto-resizing
Thought I'd post the answer as I'd got it in case someone finds this in the future!