I'm trying to fit four items on a medium screen and two on a mobile device. I've done everything from adjusting widths and heights to giving each item its own column and removing the main col and replacing it individually for each col, so technically I did col-6 col-md-3 col-lg-3. This didn't turn out so well, so I'm looking for some assistance.
$('.restaurantpartners').owlCarousel({
loop:true,
margin:10,
autoplay:false,
responsive:{
0:{
items:2
},
600:{
items:3
},
1000:{
items:5
}
}
}) .owl-carousel{
cursor: pointer;
}
.owl-carousel .owl-nav{
overflow: hidden;
height: 0px;
}
.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
background: #ff7b5f;
}
.owl-carousel .item {
text-align: center;
padding: 40px;
}
.owl-carousel .nav-btn{
height: 40px;
position: absolute;
width: 40px;
cursor: pointer;
top: 105px !important;
}
.owl-carousel .owl-prev.disabled,
.owl-carousel .owl-next.disabled{
pointer-events: none;
opacity: 0.2;
}
.owl-carousel .prev-slide{
background: url(../images/left-arrow-btn.png) no-repeat scroll 0 0;
left: -40px;
}
.owl-carousel .next-slide{
background: url(../images/right-arrow-btn.png) no-repeat scroll 0 0;
right: -40px;
}
.owl-carousel .prev-slide:hover{
background: url(../images/left-arrow-hover.png) no-repeat scroll 0 0;
}
.owl-carousel .next-slide:hover{
background: url(../images/right-arrow-hover.png) no-repeat scroll 0 0;
}
@media only screen
and (max-width : 600px) {
.owl-carousel .prev-slide{
display: none;
}
.owl-carousel .next-slide{
display: none;
}<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<section id="team" class="text-center bg-dark py-1">
<div class="container">
<div class="header my-5">
<h1 class="text-light">Meet the Team</h1>
</div>
<div class="row">
<div class="col-12 m-auto">
<div class="owl-carousel owl-theme">
<div class="item ">
<img src="https://www.wrappixel.com/demos/ui-kit/wrapkit/assets/images/team/t3.jpg" class="img-fluid rounded-circle" alt="image1">
<div class="card-body">
<div class="card-title text-center text-light">
<h4>text</h4>
<h5>text</h5>
</div>
</div>
</div>
<div class="item ">
<img src="https://www.wrappixel.com/demos/ui-kit/wrapkit/assets/images/team/t3.jpg" class="img-fluid rounded-circle" alt="image1">
<div class="card-body">
<div class="card-title text-center text-light">
<h4>text</h4>
<h5>text</h5>
</div>
</div>
</div>
<div class="item ">
<img src="https://www.wrappixel.com/demos/ui-kit/wrapkit/assets/images/team/t3.jpg" class="img-fluid rounded-circle" alt="image1">
<div class="card-body">
<div class="card-title text-center text-light">
<h4>text</h4>
<h5>text</h5>
</div>
</div>
</div>
<div class="item ">
<img src="https://www.wrappixel.com/demos/ui-kit/wrapkit/assets/images/team/t3.jpg" class="img-fluid rounded-circle" alt="image1">
<div class="card-body">
<div class="card-title text-center text-light">
<h4>text</h4>
<h5>text</h5>
</div>
</div>
</div>
<div class="item ">
<img src="https://www.wrappixel.com/demos/ui-kit/wrapkit/assets/images/team/t3.jpg" class="img-fluid rounded-circle" alt="image1">
<div class="card-body">
<div class="card-title text-center text-light">
<h4>text</h4>
<h5>text</h5>
</div>
</div>
</div>
<div class="item ">
<img src="https://www.wrappixel.com/demos/ui-kit/wrapkit/assets/images/team/t3.jpg" class="img-fluid rounded-circle" alt="image1">
<div class="card-body">
<div class="card-title text-center text-light">
<h4>text</h4>
<h5>text</h5>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"
</body>As I know for using owl carousel according to its documentation we need to add owl.carousel.css, owl.theme.default.css, jquery.js and owl.carousel.js files to our html. So I added the CDN links of them to my answer:
// carousel.js file
$('.owl-carousel').owlCarousel({
loop:true,
margin:10,
nav:true,
/* here you can set the settings for responsive items */
responsive:{
0:{
items:2
},
768:{
items:4
}
}
})<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>owl-carousel</title>
<!-- adding bootstrap CDN -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- adding owl.carousel.css CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css" integrity="sha512-UTNP5BXLIptsaj5WdKFrkFov94lDx+eBvbKyoe1YAfjeRPC+gT5kyZ10kOHCfNZqEui1sxmqvodNUx3KbuYI/A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- adding owl.theme.default.css CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css" integrity="sha512-OTcub78R3msOCtY3Tc6FzeDJ8N9qvQn1Ph49ou13xgA9VsH9+LRxoFU6EqLhW4+PKRfU+/HReXmSZXHEkpYoOA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<section id="team" class="text-center py-1">
<div class="container">
<div class="header my-5">
<h1 class="text-dark">Meet the Team</h1>
</div>
<div class="row">
<div class="col-12">
<div class="owl-carousel owl-theme">
<!-- carousel items -->
<div class="item ">
<img src="https://www.wrappixel.com/demos/ui-kit/wrapkit/assets/images/team/t3.jpg" class="img-fluid rounded-circle" alt="image1">
</div>
<div class="item ">
<img src="https://www.wrappixel.com/demos/ui-kit/wrapkit/assets/images/team/t3.jpg" class="img-fluid rounded-circle" alt="image1">
</div>
<div class="item ">
<img src="https://www.wrappixel.com/demos/ui-kit/wrapkit/assets/images/team/t3.jpg" class="img-fluid rounded-circle" alt="image1">
</div>
<div class="item ">
<img src="https://www.wrappixel.com/demos/ui-kit/wrapkit/assets/images/team/t3.jpg" class="img-fluid rounded-circle" alt="image1">
</div>
<div class="item ">
<img src="https://www.wrappixel.com/demos/ui-kit/wrapkit/assets/images/team/t3.jpg" class="img-fluid rounded-circle" alt="image1">
</div>
<div class="item ">
<img src="https://www.wrappixel.com/demos/ui-kit/wrapkit/assets/images/team/t3.jpg" class="img-fluid rounded-circle" alt="image1">
</div>
</div>
</div>
</div> <!-- end of .row class -->
</div>
</section>
<!-- adding jQuery CDN -->
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<!-- adding bootstrap.bundle.min.js CDN -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<!-- adding owl.carousel.js CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.js" integrity="sha512-gY25nC63ddE0LcLPhxUJGFxa2GoIyA5FLym4UJqHDEMHjp8RET6Zn/SHo1sltt3WuVtqfyxECP38/daUc/WVEA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- adding our javascript code -->
<script src="carousel.js"></script>
</body>
</html>As you could see I ignored your style-sheet and some of your html content. Because they are not necessary or related to the answer of this question. Also you can see that the responsive behavior of carousel comes from responsive option that owl carousel defines for its library. you can read more about options of this library from its documentation.