The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Mobile @media for mail client

  • # May 21, 2013 at 11:47 am


    Has anyone had any success with tweaking their HTML emails?

    We’ve got this @media query working however it was my understanding that using the [square brackets] would mean that only mobile mail clients would see it? The media query is kicking in on mac mail too…

    @media screen and (max-width: 340px) {
    p[class=”intro”] {
    font-size: 30px !important;

    p[class=”paragraph”] {
    font-size: 32px !important;
    line-height: 1.2 !important;

    # May 21, 2013 at 11:52 am

    >using the [square brackets] would mean that only mobile mail clients would see it

    Not heard of that…do you have a source?

    # May 21, 2013 at 12:03 pm

    I may well have that wrong end of the stick after reading this article…

    Actually what I have does work – provisionally just a quick fix to bump up the text size for mobile however I wasn’t expecting it to re-size if I opened / scaled it in the browser.

    # May 21, 2013 at 12:10 pm

    A quick google leads me to believe that the reason for the square brackets (attribute selectors) is to fix a problem with Yahoo mail.

    To be honest, without seeing the code it’s hard to see what the issue might be.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed