4

I'm currently creating a responsive email template, and i have got to the testing stage and found out that Google remove any classes you add to your tables.

I have tried using an ID as well, but they strip that as well as any data-attributes I tried.

I read up about this alittle and came across a little trick to bypass this. I managed to get this to work, but not it seems to be broken again. This trick is as follows

<table id="container" lang="x-container" title="container" class="container" width="100%" cellpadding="0" cellspacing="0" style="max-width: 600px;margin: 0 auto;">

and the CSS would be

[title~=container] {
    width: 100% !important;
}

but Google seems to strip that form my styling. Once i add * in front of the selector it stays in my css but my element doesnt seem to pick it up.

So my question is. What is the best way to target an element in gmail with media queries if you cant use ID or Class?

2
  • I'm having a similar problem. Did you ever figure this one out?
    – nicholas
    Commented Sep 15, 2015 at 4:41
  • Bump for "did my answer help"...
    – St.G
    Commented Feb 3, 2016 at 16:42

2 Answers 2

2

You can use the following:

* [summary~='fakeclassname'] {
    styles: here;
}

"Summary" is one of the attributes that Gmail does not strip out. After it occurred to me what Gmail was actually doing to emails I found this article that breaks it down in detail:

http://freshinbox.com/blog/interactive-emails-in-gmail-using-css-attribute-selectors/

There are helpful links on that page that get deeper into Gmail-specific targeting.

EDIT: it appears Exact Target strips out the "summary" attribute in ET Send Preview. The "title" attribute works fine if you want it to look correct in both Gmail and ET Preview.

6
  • Can I get an "answered" here?
    – St.G
    Commented Dec 3, 2015 at 19:04
  • 1
    Problem is that all styles that are not inline are being removed. One exception: display gets removed whatsoever, even when inline. litmus.com/help/email-clients/gmail-no-head Commented Feb 10, 2016 at 12:01
  • 1
    The assumption made in the link provided is mostly correct, however the styles that are written correctly will be relocated. I assure you, the above works, and I use it regularly. The link provided goes into detail. Tested today even!
    – St.G
    Commented Mar 30, 2016 at 18:48
  • I agree with cptstarling. Your solution didn't fix the problem. Although summary value is not stripped, CSS declaration of that selector is totally missing. (Check it out in inspector) So I don't see the way to make newsletter responsive, only if it has exactly the same elements in all breakpoints. If I use some class (or summary) to hide/show some elements from some views, it just doesn't work in Gmail "View entire message" view, nor in some mobile views.
    – Dalibor
    Commented Oct 1, 2018 at 7:54
  • I'd probably mark this question as out-of-date, since Gmail has undergone major changes, and this isn't an issue anymore. developers.google.com/gmail/design/css
    – St.G
    Commented Nov 14, 2018 at 17:05
0

This approach seems to do the job for me currently:

Styles in <head> of your e-mail template (these are removed in Gmail, but do apply for other clients):

<style type="text/css">

    /* Styles below are applied on all clients except Gmail */


    /* Desktop */

    div[id=tablet],
    div[id=mobile]{
        display: none;
    }


    /* Tablet */

    @media only screen and (max-device-width: 1024px){
        div[id=desktop],
        div[id=mobile]{
            display: none !important;
        }

        div[id=tablet]{
            display: block !important;
            font-size: 15px !important;
            max-height: none !important;
            overflow: visible !important;
        }
    }


    /* Phone */

    @media only screen and (max-device-width: 736px){
        div[id=desktop],
        div[id=tablet]{
            display: none !important;
        }

        div[id=mobile]{
            display: block !important;
            font-size: 15px !important;
            max-height: none !important;
            overflow: visible !important;
        }
    }

</style>

HTML:

<body>

    <div id="desktop">
        [template for desktop]
    </div>

    <div id="tablet" style="font-size: 0; max-height: 0; overflow: hidden;">
        [template for tablet]
    </div>

    <div id="phone" style="font-size: 0; max-height: 0; overflow: hidden;">
        [template for phone]
    </div>

</body>
1
  • This doesn't really have anything to do with what the OP was asking Commented Jun 5, 2022 at 0:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.