メールテンプレートはモバイル用にスタッキングされていませんか？

Question

メールテンプレートをモバイルで表示しているときに、2つの表のセルを互いに積み重ねようとしています。コードはブラウザで電子メールを表示するときに機能しますが、モバイル電子メールクライアントでは使用できません。

テーブルレイアウトをモバイルレイアウトにするにはどうすればよいですか？

メディアクエリ：

@media only screen and (max-width: 600px) { 
    *[class=hero-block] { 
     width: 100%; 
     display: block !important; 
     text-align: center; 
     clear: both; 
    } 
} 

HTML：

<table bgcolor="000000" border="0" cellpadding="0" cellspacing="0" width="100%"> 
    <tr> 
     <td class="hero-block"> 
      <img src="hero.jpg" height="265" width="245" /> 
     </td> 
     <td class="hero-block" width="295"> 
      <table bgcolor="000000" border="0" cellpadding="0" cellspacing="0" width="100%"> 
       <tr> 
        <td align="left"> 
         <font color="#ffffff" face="Arial,Verdana,sans-serif" size="1" style="font-size: 22px; line-height: 22px;">Thanks for signing up</font> 
        </td> 
       </tr> 
       <tr> 
        <td> 
         <img style="display: block; border:0; margin: 0; padding: 0;" src="x.gif" height="20" width="1" alt="x" /> 
        </td> 
       </tr> 
      </table> 
     </td> 
    </tr> 
</table> 

Answer 1

TDのは、今静かないつかのためのAndroidに積み重ね停止しました。ここでは、AndroidとiOSの両方で動作するTHを代わりに使用する方法があります。テスト電子メールに以下の私のコード試してみてください：

@media only screen and (max-width: 600px) { 
 
     *[class=hero-block] th{ 
 
      width: 100%; 
 
      display: block !important; 
 
      text-align: center; 
 
      clear: both; 
 
     } 
 
    }

<table border="0" cellpadding="0" cellspacing="0" width="100%" class="hero-block"> 
 
        <tr> 
 
         <th align="left" style="font-weight:normal;" bgcolor="#000000"> 
 
          <font color="#ffffff" face="Arial,Verdana,sans-serif" size="1" style="font-size: 22px; line-height: 22px;">Thanks for signing up</font> 
 
         </th> 
 
         <th align="left" style="font-weight:normal;" bgcolor="#ffffff"> 
 
          <font color="#000000" face="Arial,Verdana,sans-serif" size="1" style="font-size: 22px; line-height: 22px;">Thanks for signing up</font> 
 
         </th> 
 
        </tr> 
 
       </table>

このコードを使用する場合は通常通りフォントの太さを使用してくださいそうでない場合はブロック内のテキストが太字になります。

乾杯