我正在尝试使用媒体查询更改段落和标题的对齐方式以使其响应
我尝试使用最大宽度、边距和填充,但无法获得所需的结果。
.about-background h2 {
margin-top: 2em;
padding-right: 3.5em;
}
@media (min-width: 576px) and (max-width: 767.98px) {
.lead {
font-size: 0.9em;
width: 100%;
max-width: 768px;
}
.about-background {
background: white;
}
.about-background h2 {
font-size: 0.6;
margin-left: 8em;
width: 100%;
}
}
<div class="jumbotron about-background">
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-sm-6">
<h2><strong>We are InCFO</strong></h2>
<p class="lead" style="margin-top: 4em; padding-right: 7em;">Our mission to provide a range of financial services to companies to make their financial needs easy that needed to run and expand their business.</p>
</div>
<div class="col-sm-6">
</div>
</div>
<div class="arrow bounce">
<a class="fa fa-arrow-down fa-3x" href="#do" v-smooth-scroll></a>
</div>
</div>
</div>
我想将它们居中对齐。
最佳答案
对 .col-sm-6 使用最小宽度 100%
@media (min-width: 576px) and (max-width: 767.98px) { .col-sm-6{ min-width:100% !important;}}
关于css - 如何使用媒体查询更改段落和标题的对齐方式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55982090/