[英]How to make this div section with text, button, and textbox responsive in all screen size smoothly?
我有@media的代码,但它的对齐方式不太好。 希望您能帮助我将移动设备的内容从320px调整为767。 平板电脑则为768像素到800像素。 我的html代码正确吗? 我不能顺利地对齐内容:(
html代码:
<div class="container-fluid header-subscribe-section">
<div class="container">
<div class="row">
<div class="col-md-7">
<p>
<span class="header-p-latestmenus font-Awesome white">Get our latest games in your inbox.</span>
<span class="header-p-subscribe font-GreatVibes white">Subscribe Now!</span>
</p>
</div>
<div class="col-md-5" id="mobile-enter-email">
<input type="text" name="lname" class="header-textboxemail font-Awesome white" placeholder="Email Address">
<button type="button" class="header-btsubscribe font-GaramondPremierePro">SUBSCRIBE</button>
</div>
</div>
</div>
</div>
CSS代码:
.header-subscribe-section {background-color:#ad1f34; height:99.27px; width:100%}
.header-p-latestmenus{font-size:20px; letter-spacing:0.5px;}
.header-p-subscribe{font-size:28px; letter-spacing:0.5px;}
.header-btsubscribe{border-radius:4px; background-color:#831024; color:white; width:134.55px; height:44.19685px; width:146.19685px; border:none;font-size:18px;}
.header-textboxemail{width: 286.779527559px;height: 46.19685px;font-size: 17px;border: 0;}
.header-subscribe-section p{padding: 4% 14%;}
您可以将col-xs-36添加到您的父母div,通常我们在较小的屏幕中将输入宽度设置为100%
将css文件中的width属性更改为100%并删除高度
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.