Hi, I'm working on a newsletter template for my father. I'm using an existing HTML template and I've edited it to fit my needs. It works pretty well but I can't figure out how to make it responsive in Gmail too (in other clients like iOS Mail it's working like a charm).

I've already checked for the size of <style> block, it's less than 16KB (some say this is the limit), errors in the code (found one but still not working), removing animations with keyframes and transform (in iOS Mail these works perfectly). I've also used a different <style> blocks for media queries.

I've no idea how to make it work. Here's the code (style blocks only, full code link at the bottom), can you give me a hint?

http://www.w3.org/TR/REC-html40/loose.dtd">

[style*="Open Sans"] {font-family: 'Open Sans', Arial, sans-serif !important}

div, p, a, li, td { -webkit-text-size-adjust:none; }

*{-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}

.ReadMsgBody
{width: 100%; background-color: #ffffff;}
.ExternalClass
{width: 100%; background-color: #ffffff;}
body{width: 100%; height: 100%; background-color: #ffffff; margin:0; padding:0; -webkit-font-smoothing: antialiased;}
html{width: 100%; background-color: #ffffff;}

p {padding: 0!important; margin-top: 0!important; margin-right: 0!important; margin-bottom: 0!important; margin-left: 0!important; }

.hover:hover {opacity:0.85;filter:alpha(opacity=85);}
.underline:hover {text-decoration: underline!important;}

.jump:hover {opacity:0.75;filter:alpha(opacity=75);padding-top: 10px!important;}

a.rotator img {-webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; }

a.rotator img:hover {-webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); }

logo img {width: 125px; height: auto;}

logo_footer img {width: 100px; height: auto;}

.image175 img {width: 175px; height: auto;}
.icon34 img {width: 34px; height: auto;}

icon13 img {width: 13px; height: auto;}

.icon30 img {width: 30px; height: auto;}
.image191 img {width: 191px; height: auto; border-radius: 4px;}
.avatar83 img {width: 83px; height: auto;}
.image194 img {width: 194px; height: auto; border-radius: 4px;}
.icon25 img {width: 25px; height: auto;}
.icon37 img {width: 37px; height: auto;}
.image288 img {width: 100%;}
.image400 img {width: 400px; height: auto;}
.image600 img {width: 600px; height: auto; border-radius: 4px;}
.image185 img {width: 185px; height: auto; border-top-right-radius: 4px; border-top-left-radius: 4px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px;}
.image352 img {width: 352px; height: auto;}
.icons17 img {width: 17px; height: auto;}
</style>
<style type="text/css">
@media only screen and (max-width: 640px){
body{width:auto!important;}
table[class=full] {width: 100%!important; clear: both; }
table[class=mobile] {width: 100%!important; padding-left: 20px; padding-right: 20px; clear: both; }
table[class=fullCenter] {width: 100%!important; text-align: center!important; clear: both; }
td[class=fullCenter] {width: 100%!important; text-align: center!important; clear: both; }
*[class=erase] {display: none;}
*[class=buttonScale] {float: none!important; text-align: center!important; display: inline-block!important; clear: both;}
*[class=textLeft] {text-align: left!important; float: left!important;}
.h10 {height: 10px!important;}
table[class=scale33] {width: 30%!important;}
table[class=scale33Right] {width: 30%!important;}
table[class=scale33_2] {width: 32%!important;}
table[class=scale33Right_2] {width: 32%!important;}
table[class=scale50] {width: 46%!important;}
table[class=scale50Right] {width: 46%!important;}
.image185 img {width: 100%!important; height: auto;}
.image194 img {width: 100%!important; height: auto;}
.pad {width: 100%!important; padding-left: 15px!important; padding-right: 15px!important;}
table[class=w10] {width: 5%!important; }
table[class=w5] {width: 2%!important; }
.image600 img {width: 100%!important; height: auto!important; border-radius: 4px;}
.image400 img {width: 100%!important; height: auto;}
.image352 img {width: 100%!important; height: auto;}
.h40 {height: 40px!important;}
.h30 {height: 30px!important;}
td[class=pad20] {width: 100%!important; padding-left: 20px!important; padding-right: 20px!important; clear: both; }
}

@media only screen and (max-width: 479px){
body{width:auto!important;}
table[class=full] {width: 100%!important; clear: both; }
table[class=mobile] {width: 100%!important; padding-left: 20px; padding-right: 20px; clear: both; }
table[class=fullCenter] {width: 100%!important; text-align: center!important; clear: both; }
td[class=fullCenter] {width: 100%!important; text-align: center!important; clear: both; }
*[class=erase] {display: none;}
*[class=buttonScale] {float: none!important; text-align: center!important; display: inline-block!important; clear: both;}
.h10 {height: 10px!important;}
table[class=scale33] {width: 100%!important;}
table[class=scale33Right] {width: 100%!important;}
table[class=scale33_2] {width: 100%!important;}
table[class=scale33Right_2] {width: 100%!important;}
table[class=scale50] {width: 100%!important;}
table[class=scale50Right] {width: 100%!important;}
.image185 img {width: 100%!important; height: auto;}
.image194 img {width: 100%!important; height: auto;}
.pad {width: 100%!important; padding-left: 15px!important; padding-right: 15px!important;}
table[class=w10] {width: 100%;}
.image600 img {width: 100%!important; height: auto!important; border-radius: 4px;}
.image400 img {width: 100%!important; height: auto;}
.image352 img {width: 100%!important; height: auto;}
.h40 {height: 40px!important;}
.h30 {height: 30px!important;}
td[class=pad20] {width: 100%!important; padding-left: 20px!important; padding-right: 20px!important; clear: both; }
}
</style>

Full HTML file: http://pastebin.com/Wp7WZ87h