I'm currently working with Bootstrap to align two cards horizontally, but I also want to ensure that mobile users can view the cards stacked in a column layout. I've experimented with adding 'flex-direction' in combination with the @media tag and adjusting the 'justify-content-center' property. Additionally, I have tried removing 'text-center', 'object-fit: contain;', and playing around with different display types. As someone new to front end development, any assistance would be greatly appreciated.
CSS:
.separado{
display: inline-block;
*display: inline; /* For IE7 */
zoom: 1; /* Trigger hasLayout */
width: 45%;
text-align: center;
margin-right: 5%;
margin-left: 5%;
margin-bottom: 3%;
}
.imagen_top3{
object-fit: contain;
max-height: 600px;
border: 5px solid #252727;
padding: 1px;
}
@media screen and (max-width: 980px) {
.list-images img {
width: 100%;
margin: 3%;
flex-direction: column;
}
.separado{
zoom: 1; /* Trigger hasLayout */
width: 100%;
text-align: center;
margin: 3%;
flex-direction: column;
}
}
HTML:
<div class="d-flex justify-content-center text-center">
<div class="card text-center separado" style="width: 40%; background-color: #252727;">
<img class="card-img-top imagen_top3" src="image1.jpeg" alt="Card image cap">
<div class="card-body">
<p class="card-text" style="color:whitesmoke">Hi im John</p>
</div>
</div>
<div class="card text-center separado" style="width: 40%;background-color: #252727;">
<img class="card-img-top imagen_top3" src="image2.jpeg" alt="Card image cap">
<div class="card-body">
<p class="card-text" style="color:whitesmoke">Hi im Peter</p>
</div>
</div>
</div>