Grow your CSS skills. Land your dream job.

Mobile @media for mail client

  • # May 21, 2013 at 11:47 am

    Hello,

    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?

    http://help.campaignmonitor.com/topic.aspx?t=164

    # May 21, 2013 at 12:03 pm

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

    http://www.netmagazine.com/tutorials/build-responsive-emails

    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.

*May or may not contain any actual "CSS" or "Tricks".