Michael Kibuku
Reputation: 67
Mobile Responsive
I need help in coming up with a creative idea/way to transform the carousel indicators into a menu or any other possible way of making the whole section mobile responsive with all the indicators present within the mobile width. I have tried multiple ways that haven't worked. I am kinda new to programming where I wanted to challenge myself but making it responsive became difficult for me. As you can see when running the code, day one is not visible and also day 8 is overlapping. I'll be happy to get a solution for a project I am doing.
h1,
h2,
h3,
h4,
h5,
h6 {}
a,
a:hover,
a:focus,
a:active {
text-decoration: none;
outline: none;
}
a,
a:active,
a:focus {
color: #333;
text-decoration: none;
transition-timing-function: ease-in-out;
-ms-transition-timing-function: ease-in-out;
-moz-transition-timing-function: ease-in-out;
-webkit-transition-timing-function: ease-in-out;
-o-transition-timing-function: ease-in-out;
transition-duration: .2s;
-ms-transition-duration: .2s;
-moz-transition-duration: .2s;
-webkit-transition-duration: .2s;
-o-transition-duration: .2s;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
img {
max-width: 100%;
height: auto;
}
span,
a,
a:hover {
display: inline-block;
text-decoration: none;
color: inherit;
}
/*==========================
history area
===========================*/
.section-title,
.column-title {
font-size: 36px;
font-weight: 300;
color: #101010;
margin-bottom: 70px;
}
.section-title span,
.column-title span {
font-weight: 700;
}
.title-small {
font-size: 30px;
font-weight: 700;
}
.column-title {
margin-bottom: 30px;
}
.column-title-large {
font-size: 48px;
margin-bottom: 50px;
}
.ts-title {
font-size: 24px;
font-weight: 600;
}
.title-light {
font-weight: 300;
}
.title-small-regular {
font-weight: 400;
}
.black-color {
color: #101010 !important;
}
.title-white {
color: #fff;
}
.title-bg-small {
font-size: 14px;
font-weight: 700;
line-height: 24px;
margin-bottom: 15px;
color: #fff;
background: #101010;
display: inline-block;
padding: 3px 18px;
text-transform: uppercase;
}
.primary-bg {
background: #e80000;
}
.history-area {
background: #f7f9fb;
padding: 100px 0;
position: relative;
min-height: 100vh;
}
#history-slid .history-content {
background: #fff;
padding: 35px;
padding-left: 14px;
}
#history-slid .carousel-inner {
margin-bottom: 45px;
}
#history-slid .carousel-item {
background: #fff;
}
#history-slid .carousel-indicators {
position: relative;
left: 0%;
z-index: 5;
width: 100%;
padding-left: 0;
margin-left: 0%;
text-align: center;
list-style: none;
}
#history-slid .carousel-indicators:before {
content: "";
width: 100%;
height: 2px;
position: absolute;
left: 0;
top: 15px;
background-color: #ddd;
z-index: -1;
}
#history-slid .carousel-indicators li {
display: inline-block;
width: 70px;
height: 35px;
line-height: 35px;
margin: 0 35px;
text-indent: 0px;
cursor: pointer;
color: #101010;
border: 0px solid #fff;
border-radius: 0px;
margin-top: 40px;
font-weight: 700;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
}
#history-slid .carousel-indicators li:before {
position: absolute;
top: -30px;
left: 50%;
display: inline-block;
width: 12px;
height: 12px;
content: "";
border-radius: 50%;
background: #101010;
margin-left: -7px;
}
#history-slid .carousel-indicators li.active {
line-height: 35px;
-webkit-box-shadow: 0px 20px 30px 0px rgba(0, 0, 0, 0.15);
box-shadow: 0px 20px 30px 0px rgba(0, 0, 0, 0.15);
color: #e80000;
background: #fff;
}
#history-slid .carousel-indicators li.active::before {
background: #e80000;
}
#history-slid .carousel-indicators li.active:after {
position: absolute;
top: -34px;
left: 44%;
display: inline-block;
width: 20px;
height: 20px;
content: "";
border-radius: 50%;
margin-left: -7px;
border: 1px solid #e80000;
}
#history-slid .carousel-item-next,
#history-slid .carousel-item-prev,
#history-slid .carousel-item.active {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<section class="history-area">
<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">Beach Trip</p>
<h3 class="section-title wow fadeInUp" data-wow-duration="1.5s" data-wow-delay="400ms">Our
<span>Itinerary</span></h3>
</div>
<!-- end col -->
</div>
<!-- end row -->
<div class="row">
<div class="col-lg-12">
<div id="history-slid" class="carousel slide" data-ride="carousel" data-interval="false">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="carousel-item row">
<div class="col-lg-6 col-md-12 pl-0">
<div class="history-img">
<img class="img-fluid" src="https://i.ibb.co/CKNmhMX/blog1.jpg" alt="" />
</div>
</div>
<div class="col-lg-6 col-md-12 pr-0">
<div class="history-content">
<p class="title-bg-small primary-bg wow fadeInUp" data-wow-duration="1.5s" data-wow-delay="500ms">
Lorem ipsum</p>
<h2 class="column-title wow fadeInUp" data-wow-duration="1.5s" data-wow-delay="700ms">Lorem ipsum dolor <span>sit amet</span></h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
</p>
<p>
Benefit of the socie where we operate. A success website obusly needs great design to be one of the top 10 IT companies in India but the web design is not enough.
</p>
</div>
</div>
</div>
<!-- End off item-->
<div class="carousel-item row">
<div class="col-lg-6 col-md-12 pl-0">
<div class="history-img">
<img class="img-fluid" src="https://i.ibb.co/m5yGbdR/blog2.jpg" alt="" />
</div>
</div>
<div class="col-lg-6 col-md-12 pr-0">
<div class="history-content">
<p class="title-bg-small primary-bg wow fadeInUp" data-wow-duration="1.5s" data-wow-delay="500ms">
Lorem ipsum</p>
<h2 class="column-title wow fadeInUp" data-wow-duration="1.5s" data-wow-delay="700ms">Lorem ipsum dolor <span>sit amet</span></h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
</p>
<p>
Benefit of the socie where we operate. A success website obusly needs great design to be one of the top 10 IT companies in India but the web design is not enough.
</p>
</div>
</div>
</div>
<!-- End off item-->
<div class="carousel-item row">
<div class="col-lg-6 col-md-12 pl-0">
<div class="history-img">
<img class="img-fluid" src="https://i.ibb.co/YXV3zmh/blog3.jpg" alt="" />
</div>
</div>
<div class="col-lg-6 col-md-12 pr-0">
<div class="history-content">
<p class="title-bg-small primary-bg wow fadeInUp" data-wow-duration="1.5s" data-wow-delay="500ms">
Lorem ipsum</p>
<h2 class="column-title wow fadeInUp" data-wow-duration="1.5s" data-wow-delay="700ms">Lorem ipsum dolor <span>sit amet</span></h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
</p>
<p>
Benefit of the socie where we operate. A success website obusly needs great design to be one of the top 10 IT companies in India but the web design is not enough.
</p>
</div>
</div>
</div>
<!-- End off item-->
<div class="carousel-item row active">
<div class="col-lg-6 col-md-12 pl-0">
<div class="history-img">
<img class="img-fluid" src="https://i.ibb.co/CKNmhMX/blog1.jpg" alt="" />
</div>
</div>
<div class="col-lg-6 col-md-12 pr-0">
<div class="history-content">
<p class="title-bg-small primary-bg wow fadeInUp" data-wow-duration="1.5s" data-wow-delay="500ms">
Lorem ipsum</p>
<h2 class="column-title wow fadeInUp" data-wow-duration="1.5s" data-wow-delay="700ms">Lorem ipsum dolor <span>sit amet</span></h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
</p>
<p>
Benefit of the socie where we operate. A success website obusly needs great design to be one of the top 10 IT companies in India but the web design is not enough.
</p>
</div>
</div>
</div>
<!-- End off item-->
<div class="carousel-item row">
<div class="col-lg-6 col-md-12 pl-0">
<div class="history-img">
<img class="img-fluid" src="https://i.ibb.co/m5yGbdR/blog2.jpg" alt="" />
</div>
</div>
<div class="col-lg-6 col-md-12 pr-0">
<div class="history-content">
<p class="title-bg-small primary-bg wow fadeInUp" data-wow-duration="1.5s" data-wow-delay="500ms">
Lorem ipsum</p>
<h2 class="column-title wow fadeInUp" data-wow-duration="1.5s" data-wow-delay="700ms">Lorem ipsum dolor <span>sit amet</span></h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
</p>
<p>
Benefit of the socie where we operate. A success website obusly needs great design to be one of the top 10 IT companies in India but the web design is not enough.
</p>
</div>
</div>
</div>
<!-- End off item-->
<div class="carousel-item row">
<div class="col-lg-6 col-md-12 pl-0">
<div class="history-img">
<img class="img-fluid" src="https://i.ibb.co/YXV3zmh/blog3.jpg" alt="" />
</div>
</div>
<div class="col-lg-6 col-md-12 pr-0">
<div class="history-content">
<p class="title-bg-small primary-bg wow fadeInUp" data-wow-duration="1.5s" data-wow-delay="500ms">
Lorem ipsum</p>
<h2 class="column-title wow fadeInUp" data-wow-duration="1.5s" data-wow-delay="700ms">Lorem ipsum dolor <span>sit amet</span></h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
</p>
<p>
Benefit of the socie where we operate. A success website obusly needs great design to be one of the top 10 IT companies in India but the web design is not enough.
</p>
</div>
</div>
</div>
<!-- End off item-->
<div class="carousel-item row">
<div class="col-lg-6 col-md-12 pl-0">
<div class="history-img">
<img class="img-fluid" src="https://i.ibb.co/CKNmhMX/blog1.jpg" alt="" />
</div>
</div>
<div class="col-lg-6 col-md-12 pr-0">
<div class="history-content">
<p class="title-bg-small primary-bg wow fadeInUp" data-wow-duration="1.5s" data-wow-delay="500ms">
Lorem ipsum</p>
<h2 class="column-title wow fadeInUp" data-wow-duration="1.5s" data-wow-delay="700ms">Lorem ipsum dolor <span>sit amet</span></h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
</p>
<p>
Benefit of the socie where we operate. A success website obusly needs great design to be one of the top 10 IT companies in India but the web design is not enough.
</p>
</div>
</div>
</div>
<!-- End off item-->
<div class="carousel-item row">
<div class="col-lg-6 col-md-12 pl-0">
<div class="history-img">
<img class="img-fluid" src="https://i.ibb.co/m5yGbdR/blog2.jpg" alt="" />
</div>
</div>
<div class="col-lg-6 col-md-12 pr-0">
<div class="history-content">
<p class="title-bg-small primary-bg wow fadeInUp" data-wow-duration="1.5s" data-wow-delay="500ms">
Lorem ipsum</p>
<h2 class="column-title wow fadeInUp" data-wow-duration="1.5s" data-wow-delay="700ms">Lorem ipsum dolor <span>sit amet</span></h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
</p>
<p>
Benefit of the socie where we operate. A success website obusly needs great design to be one of the top 10 IT companies in India but the web design is not enough.
</p>
</div>
</div>
</div>
<!-- End off item-->
</div>
<!-- End off carusel inner -->
<!-- Indicators -->
<ol class="carousel-indicators text-center">
<li data-target="#history-slid" data-slide-to="0">Day 1</li>
<li data-target="#history-slid" data-slide-to="1">Day 2</li>
<li data-target="#history-slid" data-slide-to="2">Day 3</li>
<li data-target="#history-slid" data-slide-to="3" class="active">Day 4</li>
<li data-target="#history-slid" data-slide-to="4">Day 5</li>
<li data-target="#history-slid" data-slide-to="5">Day 6</li>
<li data-target="#history-slid" data-slide-to="6">Day 7</li>
<li data-target="#history-slid" data-slide-to="7">Day 8</li>
</ol>
</div>
</div>
</div>
</div>
</section>
<script src="https://code.jquery.com/jquery-2.1.0.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>hanks
Upvotes: 0
Views: 91
Answers (1)
HamiD
Reputation: 1090
The only thing which you need is to change display of your list to flex.
@media screen and (max-width:990px){
.carousel-indicators{
display:flex;
flex-wrap:wrap;
}
}
Upvotes: 1
Related Questions
- Make page mobile friendly
- Responsive CSS/HTML for Tablet or Mobile Device
- css responsive: mobile version
- Mobile and Desktop responsive markup
- CSS for mobile layout
- CSS responsive design for smartphone
- Responsive CSS Issue
- Responsive Mobile Website Design
- Responsive css to display mobile version of the webpage
- HTML CSS for mobiles