Multiple Classes not working in Responsive Email HTML

Question

I have a responsive HTML email I am working on. All my code is inlined with the exception of media queries. (I know this will not work on some email clients!) Within the media queries I have 2 classes defined:

@media only screen and (max-device-width: 480px), screen and (max-width: 550px) {

img[class="width320"] { 
width: 320px !important;
}

img[class="autoHeight"] {
height:auto !important;
}
}

When I add them to the HTML -

<tr>
    <td width="700" class="" style="display: block;" border="0">
        <img src="Welcome_WoodBottom.jpg" class="width320 autoHeight" height="26" width="700" border="0" alt="" style="display:block;" />
    </td>
</tr>

both styles do not work. The styles work individually, but not when they are together. When I inspect the code in Firebug, the classes "width320" and "autoHeight" do not even show up in the inspector.

What am I missing? Can you not use multiple classes in email media queries for some reason?

I would really like to use multiple classes in a variety of areas in my emails, so I am hoping for a solution. Thank you so much in advance!

Answer 1

When you select an element on css by the attribute selector ([attribute="value"]), it looks for the exactly value specified on the tag. In your case, your img "style" attribute value is "width320 autoHeight". So, img[class="width320 autoHeight"] would work, because you are searching for the exactly value.

Since you want to check if the element contains a certain class, the right way to do so on the css selector is using the .class syntax. So it would be like this:

@media only screen and (max-device-width: 480px), screen and (max-width: 550px) {

    img.width320 { 
        width: 320px !important;
    }

    img.autoHeight {
        height:auto !important;
    }
}