How do I write a media query for Gmail?

css email gmail html-email sendgrid

15,873

Here is a working example. Its tested on Gmail App (v8.3.12).

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
    <style>
          @media only screen and (max-width:768px)  {
            .desktop-view{display: none !important;}
          }

         @media only screen and (min-width:769px) {
            .mobile-view{display: none !important;}
          }
        </style>
</head>

<body>
    
    

    <some other stuff here>

<table class="module mobile-view" table-view="mobile" border="0" cellpadding="0" cellspacing="0" data-type="code" role="module" style="table-layout: fixed;">
    <tr>
        <td> mobile content here </td>
    </tr>
</table>

<table class="module desktop-view" table-view="desktop" role="module" data-type="code" border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;">
    <tr>
        <td> desktop content here </td>
    </tr>
</table>
    
    
    
</body>
</html>

Update:

Tested again on 9th July 2019 and code still works

Works on version 2019.5.26.252424914.release (should work between v8.3.12 and current version noted)

Update 08.02.2022:

The most important part is the the colon. If you have spaces before and after the colon in your media query declaration, then Gmail will strip out the style tag.

Cheers

15,873

Author by

wariofan1

Updated on June 05, 2022

Comments

wariofan1 almost 2 years

I am trying to write some HTML/CSS for an email but can't get things to show and hide responsively. I have one big table, with two nested tables. Each of the nested tables is a footer that is hidden or shown based on the screen size. Here's the code

        <style>
          @media all and (max-width: 768px) {
            table[table-view=desktop] {
              display: none !important;
            }

            table[table-view=mobile] {
              display: block;
            }
          }

          @media all and (min-width: 769px) {
            table[table-view=mobile] {
              display: none !important;
            }

            table[table-view=desktop] {
              display: block;
            }
          }
        </style>

    <some other stuff here>

<table class="module mobile-view" table-view="mobile" border="0" cellpadding="0" cellspacing="0" data-type="code" role="module" style="table-layout: fixed;">
...
</table>

<table class="module desktop-view" table-view="desktop" role="module" data-type="code" border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;">
...
</table>

When looking at this in Gmail, both footers appear. When using the preview tool in the email building tool (SendGrid), it looks fine.

I tried selecting the mobile-view and desktop-view classes in the media query but that didnt work- so I tried putting attributes in the HTML.

What am I doing wrong?

wariofan1 about 6 years

Thank you! Do you have any insight into getting this to work on desktop as well? As you said, it works in the app, but seemingly has no effect on gmail desktop
Syfer about 6 years

Thank for accepting this as an answer. A quick note, this media query is for Gmail and other email clients that support media query in their browser/clients. It works on Gmail browser as well. Copy the code above, sent to your gmail and resize the browser ;-)
Syfer almost 5 years

@AleksandrMakov just tested the code and updated my comment. Copy pasting the exact code above still works. Which part didn't work for you?
Aleksandr Makov almost 5 years

@Syfer weird, did just same. Sent it with mailgun to gmail, checked in Chrome and iOS Gmail, saw both "mobile" and "desktop" content simultaneously.
Syfer almost 5 years

Check if mailgun is changing the code. Like adding spaces before the pixel value. Media queries in Gmail are very strict.
Aleksandr Makov almost 5 years

@Syfer, yes, it does work. Error was in my code. If there's an unsupported property, or value not written correctly - it will break whole style block. Thank you for double-checking.
Brand Guy over 4 years

I copied and paste exact code and does not work for Gmail on iPhone 8+.
Syfer over 4 years

What are you sending it thru? Check if your compiler is adding spaces in media queries.
Mehran over 4 years

@Syfer it only works on desktop and native gmail app. If you check your code with chrome/gmail or ios/safari/gmail, it shows both mobile and desktop version
Syfer over 4 years

@Mehran The code was for OP to solve his problem. You can use display none on your mobile elements and control the elements using media queries
Mehran over 4 years

@Syfer, no it's not possible. The problem is that ipad/safari/gmail behaves just like iphone and remove all media queries. So if you want to show something only on mobile, not tablet or desktop, you can't do that. because media queries are removed btw
Syfer over 4 years

@Mehran Not sure where you read that but I havent seen iPad and iPhone remove media queries. Gmail on the other hand does remove media queries if its not written properly. Check this link out for support of media query campaignmonitor.com/css/media-queries/media
Mehran over 4 years

@Syfer just try your code with your android phone, instead of using gmail app, go to chrome then login into gmail and check the email. Also you can do the same with ipad/safari. If you inspect the page with developer tools of safari, you'll see all css of <style> is removed
Syfer over 4 years

Gmails supports media query in Gmail and browser. developers.google.com/gmail/design/css. I have been using media queries in Gmail for responsive emails for about 2-3 years. If you have a code that is not working ask a new question.
Andriy Petrusha about 3 years

Don't work at all! Gmail in browser (Chrome) on desktop cut all <style> from email. Gmail App (2021.02.21.361635104.Release) on Andrion don't display any css from <style>
Syfer over 2 years

@AndriyPetrusha this code still works on Gmail Android. Gmail will remove the whole style declaration if your code is not right. I am happy to look into your code if you want me to.
Awais about 2 years

not working any other solution ?
Syfer about 2 years

@Awais this code still works for me. If you have issues with your code can I suggest you place it as a question? Your code can be tested. The important part is the colon. Gmail will remove the style if you have spaces. I will update my answer with this.
sao about 2 years

i love writing media queries inline : )
Axel Kennedal almost 2 years

An important thing to note is that the <style>-tag has to be within the <head>-tag, otherwise it won't work.