Make grid cards work on mobile
This commit is contained in:
parent
e5187e4e1f
commit
4ceb5f77c1
|
@ -84,6 +84,25 @@ header {
|
|||
background-color: #ff964a;
|
||||
grid-area: 3/3/5/4;
|
||||
}
|
||||
@media (max-width: 1160px) {
|
||||
#cards {
|
||||
grid-template-columns: repeat(2, 350px);
|
||||
gap: 50px;
|
||||
justify-content: center;
|
||||
}
|
||||
.card:nth-child(3) {
|
||||
grid-area: 3/1/6/2;
|
||||
}
|
||||
}
|
||||
@media (max-width: 800px) {
|
||||
#cards {
|
||||
grid-template-columns: 350px;
|
||||
row-gap: 50px
|
||||
}
|
||||
#cards .card {
|
||||
grid-area: initial;
|
||||
}
|
||||
}
|
||||
|
||||
/* Card Specific Details */
|
||||
.card:nth-child(1) > h2 {
|
||||
|
|
Loading…
Reference in a new issue