1

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.

Fahim Uz Zaman
  • 444
  • 3
  • 6
PlanB
  • 71
  • 1
  • 7
  • 1
    please share your html with us – ahmednawazbutt Oct 28 '20 at 13:57
  • 1
    Is your account an @gmail.com account, or a non-gmail email? Your emails will respond differently https://emails.hteumeuleu.com/trying-to-make-sense-of-gmail-css-support-2019-edition-b7cc132ee226 – Nathan Oct 28 '20 at 22:05
  • Nathan Was right. I did not use a @gamil account in the gmail app and that caused the problem. – PlanB Oct 29 '20 at 10:14

1 Answers1

1

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.

Tim Strawbridge
  • 646
  • 4
  • 9
  • Can you inline media queries? – A Haworth Oct 28 '20 at 22:01
  • Saying media queries don't work is not strictly true. There are different types of Gmail accounts, and media queries **do** work, as long there is nothing in the CSS that it doesn't like. I suggest removing the `*` and it will probably work. However, if you have a non-gmail account using Google App, even media queries will be stripped. But all other cases are good. – Nathan Oct 28 '20 at 22:04
  • no you cant inline media queries but you can use the same code. you’ll have to figure out how it fits into your layout – Tim Strawbridge Oct 28 '20 at 22:04
  • You saved my day mate. Worked for me only for Gmail web as I expected. Thanks :) – Sinan Eldem Jul 23 '21 at 19:02