Michael Kibuku
Reputation: 67
Making section Responsive
I am trying to make my section responsive by making the (trending item) appear 2 instead of 1 in the mobile width. I am planning to have like 20 items making it long and the website not that attractive. I would love help in making them 2. Thanks.
.trending
{
width: 100%;
padding-top: 105px;
padding-bottom: 50px;
}
.trending_container
{
margin-top: 90px;
}
.trending_item
{
margin-bottom: 55px;
}
.trending_image
{
width: 82px;
height: 76px;
float: left;
}
.trending_image img
{
width: 100%;
}
.trending_content
{
padding-left: 94px;
}
.trending_title
{
margin-top: -5px;
}
.trending_title a
{
font-size: 14px;
font-weight: 700;
color: #2d2c2c;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;
}
.trending_title a:hover
{
color: #fa9e1b;
}
.trending_price
{
font-size: 14px;
font-weight: 700;
color: #fa9e1b;
}
.trending_location
{
font-size: 14px;
font-weight: 400;
color: #929191;
text-transform: uppercase;
margin-top: 2px;
}
.clearfix::before, .clearfix::after
{
content: "";
display: table;
}
.clearfix::after
{
clear: both;
}
.clearfix
{
zoom: 1;
}
@media only screen and (max-width: 575px)
{
.trending_title a
{
font-size: 14px;
}
.trending_price
{
font-size: 12px;
}
.trending_location
{
font-size: 12px;
}
.offers_image_container
{
height: calc((100vw - 30px) / 0.974);
}
.trending_item
{
margin-bottom: 30px;
}
.trending {
position: static;}
} <div class="trending">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<p class="title-bg-small wow fadeInUp" data-wow-duration="1.5s" data-wow-delay="300ms">Activities</p>
<h3 class="section-title wow fadeInUp" data-wow-duration="1.5s" data-wow-delay="400ms">What to do in
<span>Nairobi</span></h3>
<p style="color: #414240;"> Enquire for any of the activities and a tour guide will be designated to ensure smooth travelling and execution
of all activities done to perfection.
</p>
</div>
</div>
<div class="row trending_container">
<!-- Trending Item -->
<div class="col-md-3">
<div class="trending_item clearfix">
<div class="trending_image"><img src="https://images.unsplash.com/photo-1465311354905-789ff5f7a457?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" alt="https://unsplash.com/@fransaraco"></div>
<div class="trending_content">
<div class="trending_title"><a href="#">Shopping at Maasai Market</a></div>
<div class="trending_price">From $182</div>
<div class="trending_location">madrid, spain</div>
</div>
</div>
</div>
<!-- Trending Item -->
<div class="col-md-3">
<div class="trending_item clearfix">
<div class="trending_image"><img src="https://images.unsplash.com/photo-1465311354905-789ff5f7a457?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" alt="https://unsplash.com/@grovemade"></div>
<div class="trending_content">
<div class="trending_title"><a href="#">Nairobi National Park Game Drive</a></div>
<div class="trending_price">From $182</div>
<div class="trending_location">madrid, spain</div>
</div>
</div>
</div>
<!-- Trending Item -->
<div class="col-md-3">
<div class="trending_item clearfix">
<div class="trending_image"><img src="https://images.unsplash.com/photo-1465311354905-789ff5f7a457?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" alt="https://unsplash.com/@jbriscoe"></div>
<div class="trending_content">
<div class="trending_title"><a href="#">queen hotel</a></div>
<div class="trending_price">From $182</div>
<div class="trending_location">madrid, spain</div>
</div>
</div>
</div>
<!-- Trending Item -->
<div class="col-md-3">
<div class="trending_item clearfix">
<div class="trending_image"><img src="https://images.unsplash.com/photo-1465311354905-789ff5f7a457?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" alt="https://unsplash.com/@oowgnuj"></div>
<div class="trending_content">
<div class="trending_title"><a href="#">mars hotel</a></div>
<div class="trending_price">From $182</div>
<div class="trending_location">madrid, spain</div>
</div>
</div>
</div>
<!-- Trending Item -->
<div class="col-md-3">
<div class="trending_item clearfix">
<div class="trending_image"><img src="https://images.unsplash.com/photo-1465311354905-789ff5f7a457?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" alt="https://unsplash.com/@mindaugas"></div>
<div class="trending_content">
<div class="trending_title"><a href="#">grand hotel</a></div>
<div class="trending_price">From $182</div>
<div class="trending_location">madrid, spain</div>
</div>
</div>
</div>
<!-- Trending Item -->
<div class="col-md-3">
<div class="trending_item clearfix">
<div class="trending_image"><img src="https://images.unsplash.com/photo-1465311354905-789ff5f7a457?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" alt="https://unsplash.com/@itsnwa"></div>
<div class="trending_content">
<div class="trending_title"><a href="#">mars hotel</a></div>
<div class="trending_price">From $182</div>
<div class="trending_location">madrid, spain</div>
</div>
</div>
</div>
<!-- Trending Item -->
<div class="col-md-3">
<div class="trending_item clearfix">
<div class="trending_image"><img src="https://images.unsplash.com/photo-1465311354905-789ff5f7a457?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" alt="https://unsplash.com/@rktkn"></div>
<div class="trending_content">
<div class="trending_title"><a href="#">queen hotel</a></div>
<div class="trending_price">From $182</div>
<div class="trending_location">madrid, spain</div>
</div>
</div>
</div>
<!-- Trending Item -->
<div class="col-md-3">
<div class="trending_item clearfix">
<div class="trending_image"><img src="https://images.unsplash.com/photo-1465311354905-789ff5f7a457?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80"></div>
<div class="trending_content">
<div class="trending_title"><a href="#">mars hotel</a></div>
<div class="trending_price">From $182</div>
<div class="trending_location">madrid, spain</div>
</div>
</div>
</div>
</div>
</div>
</div>Upvotes: 0
Views: 50
Answers (1)
MaxiGui
Reputation: 6348
If you want your items to be on 2 columns instead of 1 for mobile, you must add:
col-xs-6for Bootstrap 3 (minimum col will be alwayscol-xs-x)col-6for Bootstrap 4 (minimum col will be alwayscol-x)
Bootstrap 3:
.trending
{
width: 100%;
padding-top: 105px;
padding-bottom: 50px;
}
.trending_container
{
margin-top: 90px;
}
.trending_item
{
margin-bottom: 55px;
}
.trending_image
{
width: 82px;
height: 76px;
float: left;
}
.trending_image img
{
width: 100%;
}
.trending_content
{
padding-left: 94px;
}
.trending_title
{
margin-top: -5px;
}
.trending_title a
{
font-size: 14px;
font-weight: 700;
color: #2d2c2c;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;
}
.trending_title a:hover
{
color: #fa9e1b;
}
.trending_price
{
font-size: 14px;
font-weight: 700;
color: #fa9e1b;
}
.trending_location
{
font-size: 14px;
font-weight: 400;
color: #929191;
text-transform: uppercase;
margin-top: 2px;
}
.clearfix::before, .clearfix::after
{
content: "";
display: table;
}
.clearfix::after
{
clear: both;
}
.clearfix
{
zoom: 1;
}
@media only screen and (max-width: 575px)
{
.trending_title a
{
font-size: 14px;
}
.trending_price
{
font-size: 12px;
}
.trending_location
{
font-size: 12px;
}
.offers_image_container
{
height: calc((100vw - 30px) / 0.974);
}
.trending_item
{
margin-bottom: 30px;
}
.trending {
position: static;}
}<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.0/css/bootstrap.css" integrity="sha512-qwBwa3tCXzwsUi4qaXeRMWS/CEeG5iNVpZz98o83NwoDdpbm1ss00GaALwCmXEnr6pQoVm49JaNMKuWvuoHKJA==" crossorigin="anonymous" />
<div class="trending">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<p class="title-bg-small wow fadeInUp" data-wow-duration="1.5s" data-wow-delay="300ms">Activities</p>
<h3 class="section-title wow fadeInUp" data-wow-duration="1.5s" data-wow-delay="400ms">What to do in
<span>Nairobi</span></h3>
<p style="color: #414240;"> Enquire for any of the activities and a tour guide will be designated to ensure smooth travelling and execution
of all activities done to perfection.
</p>
</div>
</div>
<div class="row trending_container">
<!-- Trending Item -->
<div class="col-xs-6 col-md-3">
<div class="trending_item clearfix">
<div class="trending_image"><img src="https://images.unsplash.com/photo-1465311354905-789ff5f7a457?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" alt="https://unsplash.com/@fransaraco"></div>
<div class="trending_content">
<div class="trending_title"><a href="#">Shopping at Maasai Market</a></div>
<div class="trending_price">From $182</div>
<div class="trending_location">madrid, spain</div>
</div>
</div>
</div>
<!-- Trending Item -->
<div class="col-xs-6 col-md-3">
<div class="trending_item clearfix">
<div class="trending_image"><img src="https://images.unsplash.com/photo-1465311354905-789ff5f7a457?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" alt="https://unsplash.com/@grovemade"></div>
<div class="trending_content">
<div class="trending_title"><a href="#">Nairobi National Park Game Drive</a></div>
<div class="trending_price">From $182</div>
<div class="trending_location">madrid, spain</div>
</div>
</div>
</div>
<!-- Trending Item -->
<div class="col-xs-6 col-md-3">
<div class="trending_item clearfix">
<div class="trending_image"><img src="https://images.unsplash.com/photo-1465311354905-789ff5f7a457?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" alt="https://unsplash.com/@jbriscoe"></div>
<div class="trending_content">
<div class="trending_title"><a href="#">queen hotel</a></div>
<div class="trending_price">From $182</div>
<div class="trending_location">madrid, spain</div>
</div>
</div>
</div>
<!-- Trending Item -->
<div class="col-xs-6 col-md-3">
<div class="trending_item clearfix">
<div class="trending_image"><img src="https://images.unsplash.com/photo-1465311354905-789ff5f7a457?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" alt="https://unsplash.com/@oowgnuj"></div>
<div class="trending_content">
<div class="trending_title"><a href="#">mars hotel</a></div>
<div class="trending_price">From $182</div>
<div class="trending_location">madrid, spain</div>
</div>
</div>
</div>
<!-- Trending Item -->
<div class="col-xs-6 col-md-3">
<div class="trending_item clearfix">
<div class="trending_image"><img src="https://images.unsplash.com/photo-1465311354905-789ff5f7a457?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" alt="https://unsplash.com/@mindaugas"></div>
<div class="trending_content">
<div class="trending_title"><a href="#">grand hotel</a></div>
<div class="trending_price">From $182</div>
<div class="trending_location">madrid, spain</div>
</div>
</div>
</div>
<!-- Trending Item -->
<div class="col-xs-6 col-md-3">
<div class="trending_item clearfix">
<div class="trending_image"><img src="https://images.unsplash.com/photo-1465311354905-789ff5f7a457?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" alt="https://unsplash.com/@itsnwa"></div>
<div class="trending_content">
<div class="trending_title"><a href="#">mars hotel</a></div>
<div class="trending_price">From $182</div>
<div class="trending_location">madrid, spain</div>
</div>
</div>
</div>
<!-- Trending Item -->
<div class="col-xs-6 col-md-3">
<div class="trending_item clearfix">
<div class="trending_image"><img src="https://images.unsplash.com/photo-1465311354905-789ff5f7a457?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" alt="https://unsplash.com/@rktkn"></div>
<div class="trending_content">
<div class="trending_title"><a href="#">queen hotel</a></div>
<div class="trending_price">From $182</div>
<div class="trending_location">madrid, spain</div>
</div>
</div>
</div>
<!-- Trending Item -->
<div class="col-xs-6 col-md-3">
<div class="trending_item clearfix">
<div class="trending_image"><img src="https://images.unsplash.com/photo-1465311354905-789ff5f7a457?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80"></div>
<div class="trending_content">
<div class="trending_title"><a href="#">mars hotel</a></div>
<div class="trending_price">From $182</div>
<div class="trending_location">madrid, spain</div>
</div>
</div>
</div>
</div>
</div>
</div>Bootsrap 4:
.trending
{
width: 100%;
padding-top: 105px;
padding-bottom: 50px;
}
.trending_container
{
margin-top: 90px;
}
.trending_item
{
margin-bottom: 55px;
}
.trending_image
{
width: 82px;
height: 76px;
float: left;
}
.trending_image img
{
width: 100%;
}
.trending_content
{
padding-left: 94px;
}
.trending_title
{
margin-top: -5px;
}
.trending_title a
{
font-size: 14px;
font-weight: 700;
color: #2d2c2c;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;
}
.trending_title a:hover
{
color: #fa9e1b;
}
.trending_price
{
font-size: 14px;
font-weight: 700;
color: #fa9e1b;
}
.trending_location
{
font-size: 14px;
font-weight: 400;
color: #929191;
text-transform: uppercase;
margin-top: 2px;
}
.clearfix::before, .clearfix::after
{
content: "";
display: table;
}
.clearfix::after
{
clear: both;
}
.clearfix
{
zoom: 1;
}
@media only screen and (max-width: 575px)
{
.trending_title a
{
font-size: 14px;
}
.trending_price
{
font-size: 12px;
}
.trending_location
{
font-size: 12px;
}
.offers_image_container
{
height: calc((100vw - 30px) / 0.974);
}
.trending_item
{
margin-bottom: 30px;
}
.trending {
position: static;}
}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<div class="trending">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<p class="title-bg-small wow fadeInUp" data-wow-duration="1.5s" data-wow-delay="300ms">Activities</p>
<h3 class="section-title wow fadeInUp" data-wow-duration="1.5s" data-wow-delay="400ms">What to do in
<span>Nairobi</span></h3>
<p style="color: #414240;"> Enquire for any of the activities and a tour guide will be designated to ensure smooth travelling and execution
of all activities done to perfection.
</p>
</div>
</div>
<div class="row trending_container">
<!-- Trending Item -->
<div class="col-6 col-md-3">
<div class="trending_item clearfix">
<div class="trending_image"><img src="https://images.unsplash.com/photo-1465311354905-789ff5f7a457?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" alt="https://unsplash.com/@fransaraco"></div>
<div class="trending_content">
<div class="trending_title"><a href="#">Shopping at Maasai Market</a></div>
<div class="trending_price">From $182</div>
<div class="trending_location">madrid, spain</div>
</div>
</div>
</div>
<!-- Trending Item -->
<div class="col-6 col-md-3">
<div class="trending_item clearfix">
<div class="trending_image"><img src="https://images.unsplash.com/photo-1465311354905-789ff5f7a457?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" alt="https://unsplash.com/@grovemade"></div>
<div class="trending_content">
<div class="trending_title"><a href="#">Nairobi National Park Game Drive</a></div>
<div class="trending_price">From $182</div>
<div class="trending_location">madrid, spain</div>
</div>
</div>
</div>
<!-- Trending Item -->
<div class="col-6 col-md-3">
<div class="trending_item clearfix">
<div class="trending_image"><img src="https://images.unsplash.com/photo-1465311354905-789ff5f7a457?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" alt="https://unsplash.com/@jbriscoe"></div>
<div class="trending_content">
<div class="trending_title"><a href="#">queen hotel</a></div>
<div class="trending_price">From $182</div>
<div class="trending_location">madrid, spain</div>
</div>
</div>
</div>
<!-- Trending Item -->
<div class="col-6 col-md-3">
<div class="trending_item clearfix">
<div class="trending_image"><img src="https://images.unsplash.com/photo-1465311354905-789ff5f7a457?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" alt="https://unsplash.com/@oowgnuj"></div>
<div class="trending_content">
<div class="trending_title"><a href="#">mars hotel</a></div>
<div class="trending_price">From $182</div>
<div class="trending_location">madrid, spain</div>
</div>
</div>
</div>
<!-- Trending Item -->
<div class="col-6 col-md-3">
<div class="trending_item clearfix">
<div class="trending_image"><img src="https://images.unsplash.com/photo-1465311354905-789ff5f7a457?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" alt="https://unsplash.com/@mindaugas"></div>
<div class="trending_content">
<div class="trending_title"><a href="#">grand hotel</a></div>
<div class="trending_price">From $182</div>
<div class="trending_location">madrid, spain</div>
</div>
</div>
</div>
<!-- Trending Item -->
<div class="col-6 col-md-3">
<div class="trending_item clearfix">
<div class="trending_image"><img src="https://images.unsplash.com/photo-1465311354905-789ff5f7a457?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" alt="https://unsplash.com/@itsnwa"></div>
<div class="trending_content">
<div class="trending_title"><a href="#">mars hotel</a></div>
<div class="trending_price">From $182</div>
<div class="trending_location">madrid, spain</div>
</div>
</div>
</div>
<!-- Trending Item -->
<div class="col-6 col-md-3">
<div class="trending_item clearfix">
<div class="trending_image"><img src="https://images.unsplash.com/photo-1465311354905-789ff5f7a457?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" alt="https://unsplash.com/@rktkn"></div>
<div class="trending_content">
<div class="trending_title"><a href="#">queen hotel</a></div>
<div class="trending_price">From $182</div>
<div class="trending_location">madrid, spain</div>
</div>
</div>
</div>
<!-- Trending Item -->
<div class="col-6 col-md-3">
<div class="trending_item clearfix">
<div class="trending_image"><img src="https://images.unsplash.com/photo-1465311354905-789ff5f7a457?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80"></div>
<div class="trending_content">
<div class="trending_title"><a href="#">mars hotel</a></div>
<div class="trending_price">From $182</div>
<div class="trending_location">madrid, spain</div>
</div>
</div>
</div>
</div>
</div>
</div>Upvotes: 1
Related Questions
- How to make bootstrap headings responsive?
- Responsive rows with Twitter Bootstrap
- Bootstrap, making responsive changes to layout
- Cannot make html responsive
- responsive design with bootstrap
- Cannot make html page responsive using bootstrap
- Bootstrap responsive issue
- HTML Using Bootstrap CSS Not Responsive
- responsive html using twitter bootstrap
- Responsive design with Twitter bootstrap