I'm in need of assistance with creating a responsive Bootstrap card grid.
My goal is to have a grid layout with 6 cards, initially displayed as 2 rows of 3 cards. As the screen size decreases, I want the layout to adjust accordingly to maintain readability and aesthetics, with the final layout being a single row of 1 card on very small screens.
Here is the structure of my HTML card grid:
<div class="services">
<h2>Serviços</h2>
<div class="cards">
<div class="card">
<i class="fa fa-taxi home_icons" aria-hidden="true"></i>
<h3>Atendimento Preferencial</h3>
<p>Lorem ipsum dolor sit amet.</p>
</div>
<div class="card">
<i class="fas fa-calendar-alt home_icons"></i>
<h3>Agendamentos</h3>
<p>Aeroportos <br> Guarulhos, Viracopos, Congonhas</p>
</div>
<div class="card">
<i class="fas fa-hands-helping home_icons"></i>
<h3>Acompanhamentos</h3>
<p>Lorem ipsum dolor sit amet.</p>
</div>
<div class="card">
<i class="fas fa-language home_icons"></i>
<h3>Tradução</h3>
<p>Português <i class="fas fa-arrows-alt-h"></i> Francês </p>
</div>
<div class="card">
<i class="fas fa-bus home_icons"></i>
<h3>City Tour / Viagens</h3>
<p>Interior e Litoral</p>
</div>
<div class="card">
<i class="fas fa-dollar-sign home_icons"></i>
<h3>Transfer a preço fixo</h3>
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
Below is a snippet of the CSS code for styling the cards:
.cards {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 16px;
}
.card {
box-shadow: 0 0px 5px rgba(0,0,0,0.3);
width:250px;
text-align: center;
border-radius: 5px;
}
.card p {
padding-bottom: 25px;
}
// Media queries for responsive design
@media (max-width: 575px) {
.cards {
grid-template-columns: 1fr;
}
}
@media (min-width: 576px) {
.cards {
grid-template-columns: 1fr;
}
}
@media (min-width: 768px) {
.cards {
grid-template-columns: 1fr 1fr;
}
}
@media (min-width: 992px) {
.cards {
grid-template-columns: 1fr 1fr 1fr;
}
}
@media (min-width: 1200px) {
.cards {
grid-template-columns: 1fr 1fr 1fr;
}
}
It appears that the media queries are not functioning as expected, despite importing the CSS file correctly in my HTML document.