The following code uses 3 bootstrap cards that display perfectly side by side on large screens. However, on medium size screens, the cards start to overlap and on the small ones, they completely overlap.
I tried to play with class="col-lg-4 col-md-4 col-sm-2" and changed the md-4s to 3s and the sm-2s to 3s and 4s to see if anything would change, but it didn’t.
After resizing the window and inspecting the elements containing the class="card center classes, I realized that their actual sizes are not reduced on small devices, they’re just overlapping on each other.
Any help will be appreciated.
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/[email protected]/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/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
2
Answers
because you are using
"col-sm-2"for the cards which mean it will show 1/6 which indicates it will show 6 cards on small screen? is that what you want?make the class like that
class="col-lg-4 col-md-4 col-sm-10"orclass="col-lg-4 col-md-4 col-sm-6"if you want to show two or one card in small screens then you can adjust it accordinglyIf you want three columns, use column size
4(12/3). Review the grid docs to see that column classes should be mobile (smallest) first, if only for convention and readability, and you don’t need to repeat breakpoints with the same quantity. For example,col-lg-4 col-md-4 col-sm-2should just becol-sm-2 col-md-4.Then, don’t use inline styles. They cause much repetition and make your code much harder to maintain. Use custom styles where Bootstrap doesn’t already offer classes, such as the padding classes I’m using on the container element.
Finally, margin on the body element doesn’t really work as the body is generally the size of the viewport, so margin would be outside the viewport. Use padding on the body or margin on inner elements.