メールでGmailの反応的なコンテンツを非表示にすることはできません。メールを転送しようとしたとき

Question

私はニュースレターを書こうとしていますが、GMailでテストすると反応が遅くなります。 オンOutlookとYahoo!すべては問題ありませんが、電子メールを転送しようとすると、隠しコンテンツが表示されます。

私が使用してテスト：

• putsmailを>私は見通し、ヤフーとGMailの
  1のテストを送信するためにこれを使用します。 Yahoo!>は大丈夫ですが、電子メールに隠しコンテンツを転送しようとすると表示されます。
  2. Outlook>はうまく見えますが、電子メールに電子メールを転送しようとすると表示されます。
  3. GMail>表示されている隠されたコンテンツ。
  

• mailchimp>私が唯一見通しのテストを行うためには、この作品と、それは大丈夫に見えます（それが応答コンテンツを隠します）、私は隠された内容はもはや隠されていない電子メールを転送しようとします。

この

は、私のコードの一部（）である：

  <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> 

私は立ち往生午前、何をすべきかわからない... それは大歓迎です任意のアイデア。 ありがとうございました！

Answer 1

残念ながら、GMailはまだメディアクエリをサポートしておらず、display,overflowまたはvisibilityのプロパティもサポートしていません。

詳細については、Campaign Monitor's CSS Support Guide for Email Clientsを参照してください。

あなたのニュースレターを書き直す以外には、それを反応的にするのではなく、ここで実際に解決することはできません。