Is anyone else experiencing issues with bootstrap cards overlapping on tablet views? I had to adjust the height and width in the HTML code as opposed to CSS. Check out my HTML code below:
<div class="container">
<div class="update">
<h5>UPCOMING EVENTS</h5>
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card" style="width:300px">
<img src="images/football.jpg" class="card-img-top" alt="..." style="height:200px; width:300px">
<div class="card-body" >
<h6 class="card-title " >CARIBBEAN FOOTBALL</h6>
<button type="button" class="btn btn-outline-warning card_button" >VIEW MORE..</button>
</div>
</div>
</div>
<div class="col">
<div class="card" style="width:300px">
<img src="images/football.jpg" class="card-img-top" alt="..." style="height:200px; width:300px">
<div class="card-body">
<h6 class="card-title ">EVENT NAME</h6>
<button type="button" class="btn btn-outline-warning card_button">VIEW MORE..</button>
</div>
</div>
</div>
<div class="col">
<div class="card" style="width:300px">
<img src="images/football.jpg" class="card-img-top" alt="..." style="height:200px; width:300px">
<div class="card-body">
<h6 class="card-title ">EVENT NAME</h6>
<button type="button" class="btn btn-outline-warning card_button">VIEW MORE..</button>
</div>
</div>
</div>
</div>
</div>
</div>
Here is my CSS code:
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {}
.card {
width: 200px
}
.card-img-top {
height: 300px;
width: 100px;
border-radius: 20px;
}
For a visual of how it's appearing on tablet screens, click here