I need to arrange 9 cards in a grid format of 3 by 3, but when viewed on a smaller device, it should adjust to display as a simple list of 9 cards.
CSS:
.cardContainer{
width: calc(54rem + 60px);
margin: auto;
}
.card{
width: 18rem;
margin: 10px;
float: left;
}
I am currently utilizing Bootstrap 4 version beta 3. No other CSS styles have been modified.
HTML:
<div class="cardContainer">
@foreach($cijfers as $cijfer)
<div class="card">
@if($cijfer['cijfer'] >= 8)
<img class="card-img-top" src="check.png" alt="Card image cap">
@else
<img class="card-img-top" src="cross.png" alt="Card image cap">
@endif
<div class="card-body">
<h5 class="card-title">{{$cijfer['vak']}}: {{$cijfer['cijfer']}}</h5>
</div>
</div>
@endforeach
</div>
Shown below is the current output:
https://i.sstatic.net/r7fgl.png
I have zoomed out the page slightly for better visibility of the full layout.
Could you please advise on why this is occurring and how can I rectify it?