CODEWITHSUNDEEP
cssmedia-querieshtml-emailmjml
PlanB
PlanB

Reputation: 81

CSS media query not working in HTML email

When I build an email I use media queries for adjusting the style for smartphones. The problem is if I look at the .html file on the browser everything is working fine, but when I send a test mail to my phone every style that's set within the media query is gone.

The code:

    @media only screen and (max-width:768px) {
    * {
       background-color: red; (for testing)
    }
    body > div > div > table > tbody > tr > td {
        padding: 10px !important;
    }
    .image {
        margin: 15px 0 !important;
    }
    .footer-icon-container {
        width: 75px !important;
    }
    .title {
        padding: 10px 0px !important;
    }
    .avatar > table > tbody > tr > td {
        padding: 40px 0 0 30px !important;
    }
    .sub-title > table > tbody > tr > td {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

Can somebody explain to me what I am doing wrong and what I can try to fix it? I test the email on the newest version of Gmail on Android 10 on an OnePlus 8 if that helps.

Upvotes: 1

Views: 3862

Answers (1)

Tim Strawbridge
Tim Strawbridge

Reputation: 655

For emails, you need to inline your css. GMail has been known to strip out css and media queries don't work.

You can target Gmail with this:

u ~ div .class-name{
    display:inline !important;
}

and gmail on android:

div > u + .class-name{
    display:inline !important;
}

You'll have to play around with it as far as the selectors are concerned to accommodate your structure.

Upvotes: 1

Related Questions