无法使我的div标签移动响应

Question

我正在建立一个带有优惠券代码的网站，到目前为止，我对它在桌面上的外观感到满意，但是当我在智能手机中查看时，它看起来很糟糕。我想要实现的是这个div在智能手机中显示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

您需要使用基于网格的布局，选择内容在不同屏幕上的显示方式。您可以使用bootstrap或foundation，也可以创建自己的基于网格的布局。了解有关响应式网页设计的更多信息。

Answer 2

从style标记中删除完整的.couponr属性，并将类似内容写入CSS样式表：

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

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

P.S。：.coupnr标签只是

<div class="couponr"> 

（即没有style属性）

Answer 3

没有什么只是从你的优惠券div中删除你的宽度你会得到响应自动宽度。 在您的网站上。

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