CODEWITHSUNDEEP
htmlcssemail
Tanasos
Tanasos

Reputation: 4098

Overriding inliner code for responsive email template

I am coding a responsive email template using media queries and I have a specific issue.

I am using MailChimps guidelines and therefore I got into using their CSS Inliner , but I find an issue where the inlined css somehow overrides and breaks my previously working CSS above in the styles.

So for example here is what I am talking about, here is my not inlined code:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title></title>
    <style>
        #desktop {display: block;}
        #mobi {display: none !important;}

        @media only screen and (max-width: 720px) {
            #desktop {display: none !important}
            #mobi {display: block !important}
        }
   </style>
</head>
<body>
    <table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable">
        <tr>
            <td align="center" valign="top">
                <table border="0" cellpadding="20" cellspacing="0" width="600" id="emailContainer">
                    <tr>
                        <td align="center" valign="top" id="desktop">
                            This is where my content goes.
                        </td>
                        <td align="center" valign="top" id="mobi">
                            This is where my content goes.
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>

This is just for reference, this is not my actual code, but I hope You get the point.

So my problem with this is, after I use the CSS Inliner from MailChimp, I get this:

     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title></title>
    <style>
        #desktop {display: block;}
        #mobi {display: none !important;}

        @media only screen and (max-width: 720px) {
            #desktop {display: none !important}
            #mobi {display: block !important}
        }
   </style>
</head>
<body>
    <table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable">
        <tr>
            <td align="center" valign="top">
                <table border="0" cellpadding="20" cellspacing="0" width="600" id="emailContainer">
                    <tr>
                        <td align="center" valign="top" id="desktop" style="display: block;">
                            This is where my content goes.
                        </td>
                        <td align="center" valign="top" id="mobi" style="display: none !important;">
                            This is where my content goes.
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>

And after I send test emails, in the mail clients, most importantly Gmail, everything is wrong, either both of the objects show or the #mobi one is hidden on mobile and vice versa.The !important statement in my upper css in the style section is due to the fact that the #mobi object will always be visible in Gmail unless it has an !important for the display:none property.

I tried deleting the inlined important statements but nothing worked so far. What is the problem here and how can I bypass it?

Upvotes: 0

Views: 42

Answers (1)

Shaggy
Shaggy

Reputation: 6796

According to the rules of CSS Specificity:

Inline styles added to an element (e.g., style="font-weight:bold") always overwrite any styles in external stylesheets and thus can be thought of as having the highest specificity.

You could use !important in your stylesheet to increase the specificity of the relevant styles, forcing them to override the inline styles. However, it should be noted that GMail, among other clients, does not support media queries nor the display property.

Upvotes: 1

Related Questions