When using 3 bootstrap cards in the following code, they are perfectly displayed side by side on large screens. However, on medium screens, the cards overlap, and on small screens, they completely overlap. I tried adjusting the
class="col-lg-4 col-md-4 col-sm-2"Upon resizing the window and inspecting the elements with the class="card center classes, it became clear that they do not shrink in size on smaller devices, they simply overlap.
Any assistance would be greatly appreciated.
https://i.sstatic.net/CTbLv.jpg
body {
/* border: solid 2px red; */
background-color: #EDEFEE;
font-family: 'Markazi Text', serif;
margin-top: 3rem;
margin-bottom: 3rem;
margin-left: 5%;
margin-right: 5%;
}
.container {
background-color: lightpink;
}
h1 {
font-size: 3rem;
}
h2 {
font-size: 2rem;
}
@media only screen and (max-width: 912px) {
/* For mobile phones: */
[class*="col-"] {
width: 33%;
padding: 0;
}
.container {
overflow: hidden;
padding-top: 25px;
}
}<!-- <link rel="stylesheet" href="style.css"> -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bad8d5d5cec9cec8dbcafa8f9489948a97dbd6cad2db8b">[email protected]</a>/dist/css/bootstrap.min.css">
<main>
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-2">
<div class="card center" style="width: 18rem; height: 90%;">
<img src="assets/img/ragout.jpg" class="card-img-top" alt="..." style="height: 245px;">
<div class="card-body">
<h2 class="card-title bg-warning text-danger">Ragout de pomme de terre<span class="badge bg-primary">New</span></h2>
<p class="card-text">Potato cooked with beef and carrot.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-2">
<div class="card center" style="width: 18rem; height: 90%;">
<img src="assets/img/table.jpg" class="card-img-top" alt="..." style="height: 245px;">
<div class="card-body">
<h2 class="card-title">Book a table</h2>
<p class="card-text">Potato cooked with beef and carrot.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-2">
<div class="card center" style="width: 18rem; height: 90%;">
<img src="assets/img/open.jpg" class="card-img-top" alt="..." style="height: 245px;">
<div class="card-body">
<h2 class="card-title">Open hours</h2>
<p class="card-text">Potato cooked with beef and carrot.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
</div>
</div>
</main>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c9aba6a6bdbabdbba8b989fce7fae7f9e4a8a5b9a1a8f8">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>