Multiple Classes not working in Responsive Email HTML

0
votes

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!

3
cssresponsive-designmedia-querieshtml-email
Try this img.width320{} and img.autoHeight{} instead of img[class="autoHeight"]{} - Mladen Stanojevic

3 Answers

2
votes

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 it 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;
    }
}
1
votes

I've tested this recently with the CSS [attribute~=value] Selector:

* [class~="fullWidth"] {
width:100% !important;
max-width:100% !important;
}
* [class~="autoHeight"] {
height: auto !important;
}

<td class="fullWidth autoHeight">...</td>

And this seems to render well accross mobile email clients. Could you try this?

1
votes

You can use the following format:

@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;
} }

This will then allow you to apply the two classes to the image.