Any help would be much appreciated as I'm banging my head against a brick wall on this one.
If you take a look at my HTML email here: http://projects.authenticstyle.co.uk/victoriahealth/code/vh-newsletter.html
...you'll see that when it goes responsive, the "Contents" table drops under the intro text and spans 100% of the email body - perfect.
However in Gmail on Android it just drops below the intro, BUT will not go 100% wide - it stays at 36% wide.
Does anyone know how I can force it to be 100% wide on Gmail Android? It works as intended in pretty much all other email clients.
I feel your pain — it is a tricky one.
Unfortunately, as the Gmail App doesn't support media queries, it's not going to listen to any of your CSS rules that tell it to be 100% wide on smaller screens. It can only ever be as wide as it is on desktop (which, in this case, is 36%).
Where a table is wider on desktop than a mobile viewport, you can set it to have a width of 100% and a max-width of 320px (for example). Then, with a little extra code for Apple Mail and Outlook, you can have a table that's going to be 100% wide on any screen up to a maximum of 320px. As soon as it reaches 320px, it will remain at that size. This example may help to explain it a little better and shows all the requisite conditional code.
In your situation, the options are:
1. Place each column inside a <td> on the same row, so that on mobile it remains two columns side-by-side
2. Set the table width to be 200px, rather than 36%, so that at least on the Gmail app it will be a bit wider
3. Be okay with a narrow column bumping down, because it's not a bad result for the Gmail app which is normally a complete terror! ;)
4. As a last resort, you can add an empty table to the top of the email with a width and min-width of about 620px to prevent the Gmail app from scaling your email down at all. Then set this table to be hidden on mobile. This is definitely not ideal though.
Let us know how you go!