Saludos Experto.

Este es mi primer post.

Estoy configurando en mi tienda un carousel para nuestras categorias, todo esta bien configurado hasta ahora cuando veo el carousel por la pc, pero cuando la veo por mi telefono el coruosel se diminuye dejando 3 items como en la pc.

El tema que queremos que ese mismo carousel cuando lo vean por telefono, se vean 1 item ( que se adapte a la pantalla) y no 3 items.

En espera de sus comentarios.

Nota: aqui envio el codido usado:

<!DOCTYPE html>
<html>
<head>
<title>owl carousel-6</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css"/>
<link rel="stylesheet" type="text/css" href="style.css"/>

<style type="text/css">

#owl-demo-6 .item{
margin: 5px;
}

#owl-demo-6 .item img{
display: block;
max-width: 100%;
height: auto;
}
#owl-demo-6 .item img {
border-style: solid;
border-color: coral;
}


</style>
</head>
<body>

<div id="owl-demo-6" class="owl-carousel">
<div class="item"><a href="https://www.vcmobiliarios.cl/contact"><img src="https://i.ibb.co/6RTzZ7c/2.png" "img-fluid mx-auto d-block" alt="1"></a></div>
<div class="item"><a href="https://www.vcmobiliarios.cl/contact"><img src="https://i.ibb.co/zPGQL8x/3.png" "img-fluid mx-auto d-block" alt="1"></a></div>
<div class="item"><a href="https://www.vcmobiliarios.cl/contact"><img src="https://i.ibb.co/M5twT3X/1.png" "img-fluid mx-auto d-block" alt="1"></a></div>
<div class="item"><a href="https://www.vcmobiliarios.cl/contact"><img src="https://i.ibb.co/F4gY0zM/4.png" "img-fluid mx-auto d-block" alt="1"></a></div>
<div class="item"><a href="https://www.vcmobiliarios.cl/contact"><img src="https://i.ibb.co/XzmbT8Y/7.png" "img-fluid mx-auto d-block" alt="1"></a></div>
<div class="item"><a href="https://www.vcmobiliarios.cl/contact"><img src="https://i.ibb.co/bKKHJVj/5.png" "img-fluid mx-auto d-block" alt="1"></a></div>
<div class="item"><a href="https://www.vcmobiliarios.cl/contact"><img src="https://i.ibb.co/XZjKmxQ/6.png" "img-fluid mx-auto d-block" alt="1"></a></div>

</div>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<script type="text/javascript" src="main.js"></script>

<script>
$(document).ready(function() {

var owl = $("#owl-demo-6");

owl.owlCarousel();

// Custom Navigation Events
$(".next").click(function(){
owl.trigger('owl.next');
})
$(".prev").click(function(){
owl.trigger('owl.prev');
})

});


</script>

<!-- End your code here -->

</body>
</html>

</div>