小さな画面で表のボタンを全幅にする

Question

小さな画面でボーダーベースのボタンを全幅にしようとしています。これはJSを使用できない電子メール用であるため、CSSとHTMLを介して作業する必要があります。

アイデア？

メディアクエリを使用しようとしましたが、動作しませんでした。

P.S.ボーダーボタンがここで説明されていますhttps://litmus.com/blog/a-guide-to-bulletproof-buttons-in-email-design

.container { 
 
    width: 100%; 
 
    height: 300px; 
 
    background-color: #000000; 
 
} 
 

 
.link-button { 
 
    font-size: 16px; 
 
    font-family: Helvetica, Arial, sans-serif; 
 
    color: #ffffff; 
 
    text-decoration: none; 
 
    border-radius: 20px; 
 
    -webkit-border-radius: 20px; 
 
    -moz-border-radius: 20px; 
 
    background-color: #EB7035; 
 
    border-top: 12px solid #EB7035; 
 
    border-bottom: 12px solid #EB7035; 
 
    border-right: 18px solid #EB7035; 
 
    border-left: 18px solid #EB7035; 
 
    display: inline-block; 
 
} 
 

 
@media only screen and (max-width: 480px) { 
 
    .inner-table { 
 
    width: 100%; 
 
    } 
 
}

<div class="container"> 
 
    
 
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="outer-table"> 
 
    <tr> 
 
    <td> 
 
     <table border="0" cellspacing="0" cellpadding="0" class="inner-table"> 
 
     <tr> 
 
      <td> 
 
      <a class="link-button" href="http://google.com" target="_blank">I am a button</a> 
 
      </td> 
 
     </tr> 
 
     </table> 
 
    </td> 
 
    </tr> 
 
</table> 
 
    
 
</div>

Answer 1

分間幅を追加しようと、答えはよう.link-ボタンクラスを設定することですブロックはインラインブロックではなくブロックです。

.inner-table { 
 
    text-align: center; 
 
} 
 

 
.link-button { 
 
    font-size: 16px; 
 
    font-family: Helvetica, Arial, sans-serif; 
 
    color: #ffffff; 
 
    text-decoration: none; 
 
    border-radius: 20px; 
 
    -webkit-border-radius: 20px; 
 
    -moz-border-radius: 20px; 
 
    background-color: #EB7035; 
 
    border-top: 12px solid #EB7035; 
 
    border-bottom: 12px solid #EB7035; 
 
    border-right: 18px solid #EB7035; 
 
    border-left: 18px solid #EB7035; 
 
    display: inline-block; 
 
} 
 

 
@media screen and (max-width: 480px) { 
 
    .link-button { 
 
    display: block !important; 
 
    } 
 
}

<table width="100%" border="0" cellspacing="0" cellpadding="0" class="outer-table"> 
 
    <tr> 
 
    <td> 
 
     <table border="0" cellspacing="0" cellpadding="0" class="inner-table" width="100%" > 
 
     <tr> 
 
      <td> 
 
      <a class="link-button" href="http://google.com" target="_blank">I am a button</a> 
 
      </td> 
 
     </tr> 
 
     </table> 
 
    </td> 
 
    </tr> 
 
</table>

コメントでこの回答を提供@CBroeに感謝します。

Answer 2

は誰のために小さな画面