Hi everyone,

I'm trying to figure out an issue with a responsive email template I'm building, which uses the @media property.

Someone else gave me the CSS, and I'm trying to figure out which part of it might be causing the issue.

Basically, it's a two-column email that when viewed on a mobile device, should stack all of the elements vertically into one column. I can get it to work if I don't change the height of the table columns in the template, but as soon as I do, it stops stacking the elements. If I don't change the height, it renders with all kinds of extra padding between the elements.

Here is the CSS I was given:

<style type="text/css">
@media only screen and (max-width: 600px) {
/*CSS styles here will be applied on supporting mobile devices*/
table, div {
width:100% !important;
max-width: 600px !important;
position:relative !important;
height:auto !important;
overflow:visible !important;
top:0px !important;
}
table[class=contenttable] {
width:320px !important;
}

td {
width:auto !important;
max-width:100%;
height: auto !important;
}

img {
max-width:100%;
height: auto !important;
}
}
</style>


Can anyone see anything glaringly wrong with it?

Thanks so much for any suggestions!