私のdivタグをモバイル対応にすることができません

Question

私はクーポンコードでサイトを構築していますが、これはデスクトップでの見た目には満足していますが、スマートフォンで見ると恐ろしいようです。私が達成したいのは、この部門がスマートフォンで100％幅で表示され、デスクトップビューでは70％残っていることです。

<div class="couponr" style="width: 80%; padding: 10px; text-align: center; border: 5px dashed red; margin:auto "> 
    <h3> 
    <span style="background-color:#ffffff;"><strong>HELLOCAVITE</strong></span> 
    </h3> 
    <hr /> 
    <h3> 
    P100 Off on 5 Rides! 
    </h3>  
    Copy the coupon above at checkout to redeem P100 off from Uber. 
</div> 

チェックアウト、このサンプル出力これは、デスクトップで大丈夫しかし、小さい画面で醜いhere：ここで私が使用したコードです。あなたの助けに感謝！

Answer 1

グリッドベースのレイアウトが必要です。異なる画面でのコンテンツの表示方法を選択してください。あなたはそれのためのブートストラップまたは基礎を使用することができますまたは独自のグリッドベースのレイアウトを作成することができます。レスポンシブウェブデザインの詳細をご覧ください。

Answer 2

.couponrタグから完全style属性を消去して、あなたのCSSスタイルシートの中にこのような何かを書く：

.couponr { 
    width: 70%; 
    padding: 10px; 
    text-align: center; 
    border: 5px dashed red; 
    margin:auto; 
} 

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

PS：.coupnrタグは、単に

<div class="couponr"> 

だろう（つまり、無style属性）

Answer 3

あなたのcouponr divからあなたの幅を削除するだけでは、 eオート幅。 あなたのサイトに。

<div class="couponr" style="padding: 10px; text-align: center; border: 5px dashed red; margin:auto "> 
    <h3> 
    <span style="background-color:#ffffff;"><strong>HELLOCAVITE</strong></span> 
    </h3> 
    <hr /> 
    <h3> 
    P100 Off on 5 Rides! 
    </h3>  
    Copy the coupon above at checkout to redeem P100 off from Uber. 
</div>