My website features a deck of cards, and I must say, they are quite responsive. They adhere to the set amount per row for each resolution and maintain consistent height. However, there is one issue that bothers me - when there are 2 cards in a row, with 2 below them and an extra card in a third row, that final card expands to fill the width of 2 cards instead of staying the correct size and aligned to the left.
To control how many cards appear per row based on resolution, I have implemented a system like this:
@media (min-width:992px) and (max-width: 1199px) {
.card-deck span:nth-of-type(4n) {
display: block;
width: 100%;
}
}
@media (min-width:768px) and (max-width: 991px) {
.card-deck span:nth-of-type(3n) {
display: block;
width: 100%;
}
}
@media (min-width: 576px) and (max-width: 767px) {
.card-deck span:nth-of-type(2n) {
display: block;
width: 100%;
}
}
Each card is structured in HTML as follows:
<div class="card-deck">
<div class="card mb-4" data-clickable="true" data-href="#">
<img class="card-img-top" src="https://via.placeholder.com/700x400" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Test Card</h5>
</div>
<div class="card-footer">
<small class="text-muted">More Info Here</small>
</div>
</div>
<span></span>
The use of span tags between each card might be a bit perplexing, but that's how it was done.
If you check out this Codepen (switch to tablet view and adjust the width), you'll notice that at certain resolutions, the cards in the bottom row try to expand to fill any empty spaces. My goal is to prevent this and have them aligned to the left with consistent widths like the rest of the cards.
EDIT: I discovered that setting a global max-width for the cards can resolve this issue. It may require some tweaking for different media queries to ensure alignment, and using a specific html id for the card deck will make sure the CSS only affects those cards and not the entire site.