mobile 3 pilliers

This commit is contained in:
2024-07-07 18:18:54 +02:00
parent 5d5ad21366
commit 39bef4b27a
2 changed files with 77 additions and 2 deletions

View File

@@ -309,6 +309,10 @@
display: grid;
grid-template-columns: repeat(6 auto);
grid-template-rows: repeat(3 1fr);
@media(max-width: 700px){
grid-template-rows: repeat(10 auto);
grid-template-columns: repeat(2 1fr);
}
h5{
font-size: 5rem;
@@ -319,14 +323,23 @@
h5:nth-of-type(1){
grid-row: 2;
grid-column: 1;
}
h5:nth-of-type(2){
grid-row: 2;
grid-column: 3;
@media(max-width: 700px){
grid-row: 4;
grid-column: 1;
}
}
h5:nth-of-type(3){
grid-row: 1;
grid-column: 5;
@media(max-width: 700px){
grid-row: 9;
grid-column: 1;
}
}
p{
font-size: 1rem;
@@ -340,16 +353,26 @@
grid-row: 1 /span 2;
grid-column: 1 /span 2;
@media(max-width: 700px){
width: 200px;
width: 315px;
}
}
svg:nth-of-type(2){
grid-row: 3;
grid-column: inherit;
@media(max-width: 700px){
grid-row: 5;
grid-column: 1 ;
width: 315px;
}
}
svg:nth-of-type(3){
grid-row: 1 /span 2;
grid-column: 5 /span 6;
@media(max-width: 700px){
grid-row: 9/span 9;
grid-column: 1 /span 2;
width: 315px;
}
}
p:nth-of-type(1){
grid-row: 3;
@@ -357,10 +380,18 @@
}
p:nth-of-type(2){
grid-row: 1;
@media(max-width: 700px){
grid-row: 7;
grid-column: 1 /span 2;
}
}
p:nth-of-type(3){
grid-row: 3;
grid-column: 5;
@media(max-width: 700px){
grid-row: 8;
grid-column: 1 /span 2;
}
}
}
}