On my page I have slider (showing my twitter tweets) based on OWL Carousel and on desktop looks nice.
But on mobile view there is a mess.
One overlaps the other, etc. How to modify css to resolve this issue for mobile view?
here is my code:
**
HTML
<div class="card-twitter">
<div class="img-twitter">
<blockquote class="twitter-tweet"><p lang="en" dir="ltr"></blockquote> </div>
</div>
<div class="card-twitter">
<div class="img-twitter">
<blockquote class="twitter-tweet"><p lang="en" dir="ltr"></blockquote> </div>
</div>
<div class="card-twitter">
<div class="img-twitter">
<blockquote class="twitter-tweet"><p lang="en" dir="ltr"></blockquote> </div>
</div>
</div>
CSS
max-width: 1100px;
display: flex;
}
.slider-twitter .card-twitter{
flex: 1;
margin: 0 10px;
}
.slider-twitter .card-twitter .img-twitter{
height: 100%;
width: 100%;
}
.slider-twitter .card-twitter .img-twitter img {
height: 100%;
width: 100%;
object-fit: cover;
}
.slider-twitter .card-twitter .content{
padding: 10px 20px;
}
.card-twitter .content .title{
font-size: 25px;
font-weight: 600;
}
.card-twitter .content .sub-title{
font-size: 20px;
font-weight: 600;
color: #e74c3c;
line-height: 20px;
}
.card-twitter .content p{
text-align: justify;
margin: 10px 0;
}
.card-twitter .content .btn{
display: block;
text-align: left;
margin: 10px 0;
}
.card-twitter .content .btn button{
background: #e74c3c;
color: #fff;
border: none;
outline: none;
font-size: 17px;
padding: 5px 8px;
border-radius: 5px;
cursor: pointer;
transition: 0.2s;
}
.card-twitter .content .btn button:hover{
transform: scale(0.9);
}
https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js
https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css