10

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?

tadman
  • 208,517
  • 23
  • 234
  • 262
wariofan1
  • 481
  • 2
  • 4
  • 17
  • Gmail is really picky with spaces. Remove the space beween `min-width:769px` and use classes properly eg: `table.desktop-view{display: block;}` If you are not able to to work let me know and i will put a working example in. – Syfer Apr 06 '18 at 23:11
  • @Syfer I tried your suggestion to no avail! If you can put a working example in, i would greatly appreciate it. – wariofan1 Apr 07 '18 at 13:12

1 Answers1

15

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>

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

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.

TylerH
  • 20,799
  • 66
  • 75
  • 101
Syfer
  • 4,262
  • 3
  • 20
  • 37
  • 4
    Don't work at all! Gmail in browser (Chrome) on desktop cut all – Andriy Petrusha Mar 29 '21 at 06:59
  • @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. – Syfer Oct 06 '21 at 01:18
  • 2
    @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. – Syfer Feb 08 '22 at 06:18
  • 1
    many thanks for the tremendously helpful info regarding the spaces before and after the colon. however, it seems, that only a space before the colon is a problem. if there is one afterwards, it seems to work. – codeflorist Sep 22 '22 at 10:57
  • @Syfer I am trying to use your snippet but it does not work for me. Can you please help me figure out what I could be doing wrong? I made the html file with your code and copied the rendered page to gmail signature. It shows desktop content here for both mobile and laptop. – Prateek Bhatt Mar 13 '23 at 14:05
  • I have not tried media query in Gmail signatures. This answer was for `html-email` question. There are a few questions already asked for Gmail signatures. I don't think Gmail supports media query in signatures (I might be wrong) – Syfer Mar 17 '23 at 06:06