How to Write a Media Query for Gmail

How do I write a media query for Gmail?

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>

Media Queries in Email [Gmail]?

Unfortunately, Gmail does not support the <style> tag. Media queries can only be called in the <style> tag, and not inline, therefore Gmail doesn't support them.

Here is the support chart.

I would suggest you stick to an ESP like Mailchimp for sending html email. But while you are playing around in Gmail, here is a tool that may help you debug issues with your email code.

Why is gmail not responding to media-queries?

took me a while to debug this, taking section by section out.
I hate default styles in the head. Makes it so much harder to debug, but each to their own and I know a lot of people are shifting to that method because of the Gmail update.

To resolve your issues in Gmail:

You need to add !important to all media query CSS, to override default styling.
Your slogan-hr was pushing everything out because of it's vh base width. In your media query I added an override of width:90%!important;.
You need to reduce the font size of your last button. It's blowing out at 23px in Gmail. I would suggest 20px maybe?
Your footer doesn't look too great. Best if you fiddle with that further, as both items sitting right up against the edges doesn't look great.

Finally, I would suggest avoiding this technique if you aren't completely confident with it.
I personally don't see the worth in it, since Gmail started rendering responsive code, but I know some devs use it for the outlier mobile email clients and that makes sense.
But I stick with old school tables since it just works and my clients will be managing the templates.
If I were always available to update and manage the templates I build, then it makes sense.
Just some food for thought. Hope this resolves your issues :)

Gmail App - responsive signature (media queries)

It's but not with media queries.

The problem is that some e-mail clients stripe all <style>...</style> tags out. If I remember correctly, GMail is no exception.

So, yes, you can build responsive layout by using inline CSS with values in % but it will be completely responsive then. It is to say it will absolutely depend on the parent container size.

However, your e-mail signature will unlikely ever appear out of e-mail (which is the parent container), so, you just need to check that the signature looks nice at least in most popular screen sizes.

How to Write a Media Query for Gmail

How do I write a media query for Gmail?

Media Queries in Email [Gmail]?

Why is gmail not responding to media-queries?

Gmail App - responsive signature (media queries)

Related Topics

Leave a reply