Gmail Responsive Email - Media Queries - Style Tag

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.

How to use @media (prefers-color-scheme) in responsive email in Gmail?

Dark Mode is a trend in email development to present a darker color palette for email to make it more suitable in low-light environments. Dark Mode is supported by some email clients in IOS, Android OS, MacOS Mojave and newer and Outlook 2019.

With Dark Mode enabled, the email in essence inverts colors. Backgrounds that used to be white become dark (usually hexadecimal color #333, text that was dark becomes light. However, not everything swaps in a manner that is expected. Backgrounds on images and tiles remain the same, which looks ... off. To add to the issue, no two email clients are taking the same approach to present Dark Mode, so a few creative solutions need to be implemented so that emails continue to look as expected by the developer.

The bad news is that we cannot specifically target Dark Mode via CSS in email via @media query or generated class name for Gmail or Outlook. Gmail replaces color values in the <style> sheet and Outlook will inline Dark Mode color values and adds an !important to them and makes it impossible to override it in the <style> sheet.

Solution

Until Google and Microsoft offer a solution, the best approach forward is to accept this is a reality and design emails that work no matter what the background color the user chooses to view them. More users are adopting Dark Mode, so it's only going to become more popular going forward.

Good luck.

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.

Gmail Responsive Email - Media Queries - Style Tag

How do I write a media query for Gmail?

Media Queries in Email [Gmail]?

How to use @media (prefers-color-scheme) in responsive email in Gmail?

Gmail App - responsive signature (media queries)

Related Topics

Leave a reply