Я пытаюсь сделать этот раздел не таким большим при прокрутке, я чувствую, что он занимает слишком много экрана. У кого-нибудь есть идеи сделать это не так долго? Заранее спасибо всем, кто помогает.
.content-sm {
padding-top: 60px;
padding-bottom: 60px;
}
@media (min-width: 1200px)
.container {
width: 1170px;
}
@media (min-width: 992px)
.container {
width: 970px;
}
@media (min-width: 768px)
.container {
width: 750px;
}
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
* {
border-radius: 0;
}
/*Business Posts Section
------------------------------------*/
.business-post-section {
position: relative;
background: #f7f7f7;
}
/*Business Posts Links/Buttons
------------------------------------*/
.business-post-link {
padding-top: 25px;
text-align: center;
}
.business-post-link i {
color: #fff;
width: 90px;
height: 90px;
padding: 30px;
font-size: 30px;
line-height: 30px;
position: relative;
text-align: center;
background: #00539c;
margin-bottom: 25px;
display: inline-block;
}
.business-post-link i:after {
top: -8px;
left: -8px;
right: -8px;
bottom: -8px;
content: " ";
position: absolute;
border: 1px solid #dedede;
border-radius: 50% !important;
}
.business-post-link:hover i,
.business-post-link:hover i:after {
transition: all 0.3s ease-in-out;
}
.business-post-link:hover i {
background: #db9e33;
}
.business-post-link:hover i:after {
border-color: #db9e33;
}
.rounded-x {
border-radius: 50% !important;
}
.business-post-title {
font-size: 20px;
line-height: 24px;
color: #555;
}
@media (min-width: 768px)
.col-sm-4 {
width: 33.33333333%;
}
@media (min-width: 768px)
.col-sm-6 {
width: 50%;
}
@media (min-width: 768px)
.col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9 {
float: left;
}
.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.css" rel="stylesheet"/>
<div class="wrapper">
<!--=== Business Block ===-->
<div class="business-post-section">
<div class="container content-sm">
<div class="row ">
<a href="http://www.test.com">
<div class="col-sm-4 business-post-link">
<i class="rounded-x icon-drawer"></i>
<h2 class="business-post-title">Tax Collection Solutions</h2>
</div>
</a>
<a href="http://www.test.com">
<div class="col-sm-4 business-post-link">
<i class="rounded-x icon-flag"></i>
<h2 class="business-post-title">Auction Solutions</h2>
</div>
</a>
<a href="http://www.test.com">
<div class="col-sm-4 business-post-link">
<i class="rounded-x icon-wallet"></i>
<h2 class="business-post-title">Payment Solutions</h2>
</div>
</a>
</div><!--/row-->
</div><!--/container-->
</div>
<!--=== Contact Us Block ===-->
<div class="business-post-section">
<div class="container content-sm">
<div class="row ">
<div class="col-sm-2"></div>
<a href="http://www.test.com">
<div class="col-sm-4 business-post-link">
<i class="rounded-x icon-screen-desktop"></i>
<h2 class="business-post-title">Request a Demo</h2>
</div>
</a>
<a href="http://www.test.com">
<div class="col-sm-4 business-post-link">
<i class="rounded-x icon-call-in"></i>
<h2 class="business-post-title">Contact Us</h2>
</div>
</a>
<div class="col-sm-2"></div>
</div><!--/row-->
</div><!--/container-->
</div>
</div>