Hi Everyone,

I recently formatted the free Litmus Crowder-Email-Template to suit my needs. The newsletter is responsive on iOS email client but not on Android Gmail app client? Here is the code that I have been using, any help getting this template to work in Gmail would be greatly appreciated.

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.0"/>
<title>Test</title>
<style>

@import url(http://fonts.googleapis.com/css?family=Roboto:300); /*Calling our web font*/

/* Some resets and issue fixes */
#outlook a { padding:0; }
body{ width:100% !important; -webkit-text; size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0; }

.ReadMsgBody { width: 100%; }
.ExternalClass {width:100%;}
.backgroundTable {margin:0 auto; padding:0; width:100%;!important;}
table td {border-collapse: collapse;}
.ExternalClass * {line-height: 115%;}

/* End reset */

/* These are our tablet/medium screen media queries */
@media screen and (max-width: 630px){

/* Display block allows us to stack elements */

*[class="mobile-column"] {display: block;}

/* Some more stacking elements */
*[class="mob-column"] {float: none !important;width: 100% !important;}

/* Hide stuff */
*[class="hide"] {display:none !important;}

/* This sets elements to 100% width and fixes the height issues too, a god send */
*[class="100p"] {width:100% !important; height:auto !important;}

/* For the 2x2 stack */

*[class="condensed"] {padding-bottom:40px !important; display: block;}

/* Centers content on mobile */
*[class="center"] {text-align:center !important; width:100% !important; height:auto !important;}

/* 100percent width section with 20px padding */
*[class="100pad"] {width:100% !important; padding:20px;}

/* 100percent width section with 20px padding left & right */
*[class="100padleftright"] {width:100% !important; padding:0 20px 0 20px;}

/* 100percent width section with 20px padding top & bottom */
*[class="100padtopbottom"] {width:100% !important; padding:20px 0px 20px 0px;}

}

</style>

</head>

<div style="background:#687079;">

<body style="padding:0; margin:0" bgcolor="#687079">

<table border="0" cellpadding="0" cellspacing="0" style="margin: 0; padding: 0" width="100%">
<tr>
<td align="center" valign="top">

<table width="640" border="0" cellspacing="0" cellpadding="0" class="hide">
<tr>
<td height="20"></td>
</tr>
</table>

<table width="640" cellspacing="0" cellpadding="0" bgcolor="#" class="100p">
<tr>
<td background="images/header-bg.jpg" bgcolor="#3b464e" width="640" valign="top" class="100p">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:640px;">
<v:fill type="tile" src="images/header-bg.jpg" color="#3b464e" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<div>
<table width="640" border="0" cellspacing="0" cellpadding="20" class="100p">
<tr>
<td valign="top">
<table border="0" cellspacing="0" cellpadding="0" width="600" class="100p">
<tr>
<td align="left" width="50%" class="100p"><img src="images/logo.png" alt="Logo" border="0" style="display:block" /></td>
<td width="50%" class="hide" align="right" style="font-size:16px; color:#FFFFFF;"><font face="'Roboto', Arial, sans-serif"><a href="#" style="color:#FFFFFF; text-decoration:none;">HOME</a>       |       <a href="#" style="color:#FFFFFF; text-decoration:none;">HOME</a>       |       <a href="#" style="color:#FFFFFF; text-decoration:none;">HOME</a></font></td>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="0" width="600" class="100p">
<tr>
<td height="35"></td>
</tr>
<tr>
<td align="center" style="color:#FFFFFF; font-size:24px;">
<font face="'Roboto', Arial, sans-serif">
<span style="font-size:44px;">Introducing Crowder</span><br />
<br />
<Span style="font-size:24px;">Your ultimate crowd<br />
sourcing solution</Span>
<br /><br />

<a href="##" style="color:#FFFFFF; text-decoration:none;">
<table border="0" cellspacing="0" cellpadding="10" style="border:2px solid #FFFFFF;">
<tr>
<td align="center" style="color:#FFFFFF; font-size:16px;"><font face="'Roboto', Arial, sans-serif"><a href="##" style="color:#FFFFFF; text-decoration:none;">FIND OUT MORE</a></font></td>
</tr>
</table>
</a>
</font>
</td>
</tr>
<tr>
<td height="35"></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if gte mso 9]>
/v:textbox
/v:rect
<![endif]-->
</td>
</tr>
</table>
<table width="640" border="0" cellspacing="0" cellpadding="20" bgcolor="#2a8e9d" class="100p">
<tr>
<td align="center" style="font-size:24px; color:#FFFFFF;"><font face="'Roboto', Arial, sans-serif">Why Crowder?</font></td>
</tr>
</table>
<table width="640" border="0" cellspacing="0" cellpadding="20" class="100p" bgcolor="#FFFFFF">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" class="100padtopbottom" width="600">
<tr>
<td align="left" class="condensed" valign="top">
<table align="left" border="0" cellpadding="0" cellspacing="0" class="mob-column" width="290">
<tr>
<td valign="top" align="center">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" align="center" class="100padleftright">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="135" align="center"><a href="#"><img src="images/icon-1.png" border="0" style="display:block;"/></a></td>
<td width="20"></td>
<td width="135" align="center"><a href="#"><img src="images/icon-1.png" border="0" style="display:block;"/></a></td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="10"></td>
</tr>
<tr>
<td valign="top" class="100padleftright" align="center">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" width="135" align="center" style="font-size:16px; color:#2a8e9d;"><font face="'Roboto', Arial, sans-serif">Customise your user messages</font></td>
<td width="20"></td>
<td valign="top" width="135" align="center" style="font-size:16px; color:#2a8e9d;"><font face="'Roboto', Arial, sans-serif">100% unique privacy options</font></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td width="20" class="hide"></td>
<td align="left" class="condensed" valign="top">
<table align="left" border="0" cellpadding="0" cellspacing="0" class="mob-column" width="290">
<tr>
<td valign="top" align="center">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" align="center" class="100padleftright">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="135" align="center"><a href="#"><img src="images/icon-1.png" border="0" style="display:block;"/></a></td>
<td width="20"></td>
<td width="135" align="center"><a href="#"><img src="images/icon-1.png" border="0" style="display:block;"/></a></td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="10"></td>
</tr>
<tr>
<td valign="top" class="100padleftright" align="center">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" width="135" align="center" style="font-size:16px; color:#2a8e9d;"><font face="'Roboto', Arial, sans-serif">Fully customise your settings</font></td>
<td width="20"></td>
<td valign="top" width="135" align="center" style="font-size:16px; color:#2a8e9d;"><font face="'Roboto', Arial, sans-serif">Upload your product photos</font></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table width="640" border="0" cellspacing="0" cellpadding="0" bgcolor="#b2d6db" class="100p" height="1">
<tr>
<td width="20" bgcolor="#FFFFFF"></td>
<td align="center" height="1" style="line-height:0px; font-size:1px;"> </td>
<td width="20" bgcolor="#ffffff"></td>
</tr>
</table>
<table width="640" border="0" cellspacing="0" cellpadding="20" bgcolor="#ffffff" class="100p">
<tr>
<td align="center" style="font-size:16px; color:#848484;"><font face="'Roboto', Arial, sans-serif"><span style="color:#2a8e9d; font-size:24px;">We will amaze you</span><br />
<br />
<span style="font-size:16px;">Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI.</span></font>
</td>
</tr>
</table>
<table width="640" border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff" class="100p">
<tr>
<td align="center"><img src="images/ipad.png" class="100p" border="0" style="display:block" /></td>
</tr>
</table>
<table width="640" border="0" cellspacing="0" cellpadding="20" bgcolor="#2a8e9d" class="100p">
<tr>
<td align="center" style="font-size:16px; color:#ffffff;"><font face="'Roboto', Arial, sans-serif"><span style="font-size:24px;">We will amaze you</span><br />
<br />
<span style="font-size:16px;">Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI.</span></font>
</td>
</tr>
</table>
<table width="640" border="0" cellspacing="0" cellpadding="20" bgcolor="#ffffff" class="100p">
<tr>
<td align="left" width="50%" style="font-size:14px; color:#848484;"><font face="'Roboto', Arial, sans-serif">© Crowder 2014</font></td>
<td align="right" width="50%" style="font-size:14px; color:#848484;"><font face="'Roboto', Arial, sans-serif">Unsubscribe</font></td>
</tr>
</table>
<table width="640" class="100p" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="50"></td>
</tr>
</table>
</td>
</tr>
</table>

</body>
</html>