Search code examples
htmlemailoutlookgmailhtml-email

Hide Content In Mobile E-mail Doesn't Work For Gmail

i am testing to hide content for mobile mails.

 @media only screen and (max-width: 600px) {
            .hide-on-mobile {
                display: none !important;
            }
        }

This @media query worked for mobile Outlook but i am not able to hide content for mobile Gmail.

Is it possible?

Here's my test code trying to hide particular <tr> :

<!doctype html>
<html>
<head>
    <title>Denizbank</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>
        @media only screen and (max-width: 600px) {
            .hide-on-mobile {
                display: none !important;
            }
        }
    </style>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" style="width: 100%;">

    <table width="789" border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="white">
        <tr>
            <td style="line-height: 1px; font-size: 1px" colspan="3">
                    <img style="display:block; border:0;" src="https://www.denizbank.com/mailing/avukat_ust_240323_01.jpg" width="789" height="108" alt=""></td>
        </tr>



        <tr class="hide-on-mobile">
            <td  style="line-height: 1px; font-size: 1px">
                    <img style="display:block; border:0;" src="https://www.denizbank.com/mailing/afili_meslek_avukat_mailing_280223_02.jpg" width="46" height="301" alt=""></td>
            <td  width="701" height="301" bgcolor="#364F64" align="center" >

                <p style="margin: 0 !important; padding: 0px 50px 15px 50px;  display: inline-block !important;   font-family: Helvetica, Arial, sans-serif; font-size: 35px !important; line-height: 130% !important; color: #ffffff; font-weight: bold !important;">
                  Nakit İhtiyaçlarınız için Hızlı Çözüm Afili Bankacılık’ta!
                    </p>
 
            </td>
            <td  style="line-height: 1px; font-size: 1px">
                    <img style="display:block; border:0;" src="https://www.denizbank.com/mailing/afili_meslek_avukat_mailing_280223_04.jpg" width="42" height="301" alt=""></td>
        </tr>

I've tried to hide the <tr> for mobile.

@media only screen and (max-width: 600px) {
            .hide-on-mobile {
                display: none !important;
            }
        }

Than i've tried to give;

<tr style="display: none;">

than override it with;

 @media only screen and (min-width: 601px) {
      tr[style*="display: none;"] {
        display: table-row !important;
      }
    }

But the non-displayed content didn't come back on desktop mails.

Solution

  • There's a couple of things going on here. Some versions of Gmail don't allow <style> blocks and will remove it. So I normally find it safer to go mobile first.

    However, your mobile first code uses a more advanced way of selecting that many email clients can't cope with: tr[style*="display: none;"]

    If you use your earlier method of a class, that should work.

    I.e.

    <tr class="showOnDesktop" style="display: none;mso-hide:none;">

@media only screen and (min-width: 601px) {
      .showOnDesktop {
        display: table-row !important;
      }
    }

    I've also added mso-hide:none for Outlook Windows desktop.

    If that doesn't work, try it on a div with display:block !important. That's what I normally use.