72 lines
1.0 KiB
CSS
72 lines
1.0 KiB
CSS
.cards_container {
|
|
display: grid;
|
|
row-gap: 1em;
|
|
column-gap: 1em;
|
|
/* grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); */
|
|
}
|
|
|
|
.card-body {
|
|
text-align: center;
|
|
width: 10px;
|
|
}
|
|
|
|
|
|
|
|
/* media querys */
|
|
|
|
@media only screen and (max-width: 767px) {
|
|
|
|
/* red */
|
|
svg {
|
|
height: 50px;
|
|
width: auto;
|
|
}
|
|
|
|
.cards_container {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
|
|
@media only screen and (min-width: 768px) and (max-width: 991px) {
|
|
|
|
/* purple */
|
|
svg {
|
|
height: 50px;
|
|
width: auto;
|
|
}
|
|
|
|
.cards_container {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
}
|
|
}
|
|
|
|
@media only screen and (min-width: 992px) and (max-width: 1199px) {
|
|
|
|
/* green */
|
|
svg {
|
|
height: 100px;
|
|
width: auto;
|
|
}
|
|
|
|
.cards_container {
|
|
grid-template-columns: repeat(4, 1fr);
|
|
}
|
|
}
|
|
|
|
@media only screen and (min-width: 1200px) {
|
|
|
|
/* yellow */
|
|
svg {
|
|
height: 150px;
|
|
width: auto;
|
|
}
|
|
|
|
.cards_container {
|
|
grid-template-columns: repeat(5, 1fr);
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
} |