Newsletter can't hide responsive content on gmail and when I try to forward the e-mail

Question

I am trying to write a newsletter but I am having trouble hiding the responsive contents when I test on GMail . On Outlook and Yahoo everything is ok, but if I try to forward the e-mail the hidden contents are visible.

I tested using :

• putsmail > I use this to send test on Outlook , Yahoo and GMail
  1 . Yahoo > looks ok, but when I try to forward the e-mail the hidden content it's visible;
  2. Outlook > looks ok, but when I try to forward the e-mail the hidden content it's visible;
  3. GMail > the hidden content it's visible.
  

• mailchimp > this works for me to make tests only on Outlook and it looks ok (it hides the responsive content), but when I try to forward the e-mail the hidden contents are not hidden anymore.

This is a part of my code () :

            <table align="center" style="width:80%;margin-left:10%;margin-right:10%;/*border: 1px solid #FF69B4;*/">
                <tbody>

                   <tr>
                        <td align="center" style="padding: 0 10%; width: 100%;">
                           <span class="vizualizati-aici-normal" style="font-family: Arial;font-size: 12px;color:#666;">
                               <a href="#" style="color:#666;">click here</a>.
                           </span>
                           <span class="vizualizati-aici-tableta" style="font-family: Arial;font-size: 11px;color:#666; display: none;visibility: hidden;height: 0;overflow: hidden;">
                               <a href="#" style="color:#666;">click here</a>.
                           </span>
                           <span class="vizualizati-aici-mobil" style="font-family: Arial;font-size: 10px;color:#666; display: none;visibility: hidden;height: 0;overflow: hidden;">
                                <a href="#" style="color:#666;">click here</a>.
                           </span>
                       </td>
                   </tr>

                   <tr>
                       <td align="center" style="padding: 0 10%; width: 100%;" class="header-hr-newsletter">
                           <h1 style="font-family: 'EB Garamond', serif;font-size: 80px;font-weight: 400;color:#000;padding:0;margin:0;">
                                Newsletter
                           </h1>
                            <h2 style="font-family: 'EB Garamond', serif;font-size: 60px;font-weight: 400;color:#000;padding:20px 0;margin:0;display: none;visibility: hidden;height: 0;overflow: hidden;">
                                 Newsletter
                           </h2>
                           <h3 style="font-family: 'EB Garamond', serif;font-size: 40px;font-weight: 400;color:#000;padding:20px 0;margin:0;display: none;visibility: hidden;height: 0;overflow: hidden;">
                                 Newsletter
                           </h3>
                       </td>
                   </tr>

                    <tr>
                        <td align="center" style="width:100%;background-color: #cc66ff;width: 100%; padding: 0 10%;" class="header-with-number-and-logo">
                           <table style="margin:0;padding:0; width:100%; padding:10px 5px;">
                                <tbody>
                                   <tr>
                                       <td style="width:50%;color:#FFF;text-align: left;padding-right: 10%;font-family: Arial;">
                                            <span class="nr-revista-normal" style="font-size: 25px;">Nr.: x, yy zzz</span>
                                            <span class="nr-revista-tableta" style="font-size: 18px;display: none;visibility: hidden;height: 0;overflow: hidden;">Nr.: x, yy zzz</span>
                                            <span class="nr-revista-mobil" style="font-size: 13px;display: none;visibility: hidden;height: 0;overflow: hidden;">Nr.: x, yy zzz</span>
                                       </td>

                                       <td align="right" style="width:50%;padding-left: 10%;">
                                            <span class="header-normal-screen-logo" style="color: #FFF;font-size: 25px;">
                                             Some Logo
                                            </span>
                                            <span class="header-tablet-logo" style="display: none;visibility: hidden;height: 0;overflow: hidden;color:#FFF;font-size: 18px;">
                                             Some Logo
                                            </span>
                                            <span  class="header-mobil-logo" style="display: none;visibility: hidden;height: 0;overflow: hidden;color:#FFF;font-size: 18px;">
                                             Some Logo
                                            </span>
                                       </td>
                                   </tr>
                               </tbody>
                           </table>
                        </td>
                    </tr>

                </tbody>
            </table>

            <style>

                @media only screen and (max-width: 768px) and (min-width: 479px){

                    body{
                        /*background-color: #FFFF45;*/
                    }

                    /* click here */
                    .vizualizati-aici-normal{
                        display: none!important;
                        height: 0!important;
                        visibility: hidden!important;
                        overflow: hidden!important;

                    }
                    .vizualizati-aici-tableta{
                        display: block!important;
                        height: auto!important;
                        visibility: visible!important;
                        overflow: visible!important;
                    }

                    /*newsletter title*/
                    .header-hr-newsletter h1{
                        display: none!important;
                        height: 0!important;
                        visibility: hidden!important;
                        overflow: hidden!important;
                    }
                    .header-hr-newsletter h2{
                        display: block!important;
                        height: auto!important;
                        visibility: visible!important;
                        overflow: visible!important;
                    }

                    /*number*/
                    .nr-revista-normal{
                      display: none!important;
                      height: 0!important;
                      visibility: hidden!important;
                      overflow: hidden!important;
                    }
                    .nr-revista-tableta{
                      display: block!important;
                      height: auto!important;
                      visibility: visible!important;
                      overflow: visible!important;
                    }
                    /*logo*/

                    .header-normal-screen-logo{
                      display: none!important;
                      height: 0!important;
                      visibility: hidden!important;
                      overflow: hidden!important;
                    }
                    .header-tablet-logo{
                      display: block!important;
                      height: auto!important;
                      visibility: visible!important;
                      overflow: visible!important;
                    }

                }

                @media only screen and (max-width: 480px) {

                    body{
                        /*background-color: #00EE33;*/
                    }

                    /* click here */
                    .vizualizati-aici-normal{
                        display: none!important;
                        height: none!important;
                        visibility: hidden!important;
                        overflow: hidden!important;

                    }
                   .vizualizati-aici-tableta{
                        display: none!important;
                        height: 0!important;
                        visibility: hidden!important;
                        overflow: hidden!important;
                    }
                    .vizualizati-aici-mobil{
                        display: block!important;
                        height: auto!important;
                        visibility: visible!important;
                        overflow: visible!important;

                    }

                    /*newsletter title*/
                    .header-hr-newsletter h1{
                        display: none!important;
                        height: 0!important;
                        visibility: hidden!important;
                        overflow: hidden!important;
                    }
                    .header-hr-newsletter h2{
                        display: none!important;
                        height: 0!important;
                        visibility: hidden!important;
                        overflow: hidden!important;
                    }
                    .header-hr-newsletter h3{
                        display: block!important;
                        height: auto!important;
                        visibility: visible!important;
                        overflow: visible!important;
                    }

                    /*number*/
                    .nr-revista-normal{
                      display: none!important;
                      height: 0!important;
                      visibility: hidden!important;
                      overflow: hidden!important;
                    }
                    .nr-revista-tableta{
                      display: none!important;
                      height: 0!important;
                      visibility: hidden!important;
                      overflow: hidden!important;
                    }
                    .nr-revista-mobil{
                      display: block!important;
                      height: auto!important;
                      visibility: visible!important;
                      overflow: visible!important;
                    }

                    /*logo*/
                    .header-normal-screen-logo{
                      display: none!important;
                      height: 0!important;
                      visibility: hidden!important;
                      overflow: hidden!important;
                    }
                    .header-tablet-logo{
                      display: none!important;
                      height: 0!important;
                      visibility: hidden!important;
                      overflow: hidden!important;
                    }
                    .header-mobil-logo{
                      display: block!important;
                      height: auto!important;
                      visibility: visible!important;
                      overflow: visible!important;
                    }    

               }

            </style>

I am stuck, don't know what to do ... Any idea it's welcome. Thank you!

Answer 1

The bad news here is that, unfortunately, GMail does not yet support media queries nor does it support the display , overflow or visibility properties.

See Campaign Monitor's CSS Support Guide for Email Clients for more information.

Other than rewriting your newsletter to be completely fluid, rather than trying to make it responsive, I'm afraid there's no real solution to be had here.