HI

I am using the below CSS in my email. But image swap function is not working in Gmail, it does work perfectly fine in all iOS version but not in Andriod Gmail clients.

And I doubt because of that (as Gmail is now supporting media queries) my emails are not being responsive in Gmail clients? Any thought or fix?

Here is my CSS...


<style type="text/css">
.MsoHyperlinkCTA {
mso-style-priority: 99;
text-decoration: none;
color: #ffffff;
}
.MsoHyperlinkFollowedCTA {
mso-style-priority: 99;
text-decoration: none;
color: #ffffff;
}
.link {text-decoration: none; color: #007AC9;}
.ReadMsgBody {
width: 100%;
background-color: #ffffff;
}
.ExternalClass {
width: 100%;
background-color: #ffffff;
}
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {
line-height: 100%;
}
body {
width: 100%;
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
-ms-text-size-adjust: 100%;
margin: 0 !important;
padding: 0 !important;
font-family: Arial, Helvetica, sans-serif;
background-color: #ececec;
}
p {
margin: 1em 0;
}
img {
-ms-interpolation-mode: bicubic;
}
img {
outline: 0;
}
table td {
border-collapse: collapse;
}
a {
color: #007AC9;
text-decoration: none;
}
table {
border-collapse: collapse !important;
}
body, table, td, a {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
table, td {
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
@-ms-viewport {
width: device-width;
}
@media screen and (max-width: 525px) {
body[yahoo] .deviceWidth {
width: 100% !important;
max-width: 100% !important;
}
img[class="swap"] {
content: url("http://eNewsletter_direct260.jpg")!important;
max-width: auto !important;
width: auto !important;
margin: auto;
padding-top: 40px;
padding-bottom: 20px;
}
.img-max {
max-width: 100% !important;
width: 100% !important;
height: auto !important;
}
.padding {
padding: 10px 5% 15px 5% !important;
}
.paddingfooter {
padding: 10px 5% 0px 5% !important;
}
/* ADJUST BUTTONS ON MOBILE /
.mobile-button-container {
margin: 0 auto;
width: 100% !important;
}
.mobile-button {
padding: 15px !important;
border: 0 !important;
font-size: 16px !important;
display: block !important;
}
}
/ iOS BLUE LINKS /
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
/ ANDROID CENTER FIX /
div[style="margin: 16px 0;"] {
margin: 0 !important;
}
</style>