Search code examples
htmlcssemailgmailmargin

Platform-specific CSS for HTML emails

I'm using negative margin values for an HTML email, which is admittedly a tricky issue. However, most of my email list is on OSX or iOS, so it's worth it. On the other hand, some of my list is on Gmail, where negative margin values get stripped. Instead of using a negative margin for my Gmail audience, I'm wanting to center that element instead. Is there a way to write CSS specifically for Gmail (or any other platform)?

Example code for Apple products:

.cmt_new img {margin-bottom: -55px; position:relative; z-index:1;}

enter image description here

Desired outcome for Gmail:

enter image description here

Solution

  • One thing I can suggest, is to write a code that:
    Works for the first email client (the not gmail one), and would look good, if you were to take out the piece that's not supported by gmail.
    Basically you'd make a unique document work for both.
    How?
    By finding out exactly which codes Gmail doesn't support, you will be able to make a design, with in mind the fact that certain codes won't count.

    Something like:

    A = is a code that's supported by all (including gmail).
    B = is a code that's not supported by gmail.

    Code:

    < A >Hello< A > < B > everyone < B >
    < A > and welcome < A >

    Result on emails: Hello everyone and welcome.
    Result on gmail: Hello and welcome.

    Get it?