mobile 3 pilliers

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

View File

@ -1474,6 +1474,12 @@ footer {
grid-template-columns: repeat(6 auto); grid-template-columns: repeat(6 auto);
grid-template-rows: repeat(3 1fr); grid-template-rows: repeat(3 1fr);
} }
@media (max-width: 700px) {
#home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto {
grid-template-rows: repeat(10 auto);
grid-template-columns: repeat(2 1fr);
}
}
#home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto h5 { #home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto h5 {
font-size: 5rem; font-size: 5rem;
font-weight: 800; font-weight: 800;
@ -1488,10 +1494,22 @@ footer {
grid-row: 2; grid-row: 2;
grid-column: 3; grid-column: 3;
} }
@media (max-width: 700px) {
#home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto h5:nth-of-type(2) {
grid-row: 4;
grid-column: 1;
}
}
#home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto h5:nth-of-type(3) { #home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto h5:nth-of-type(3) {
grid-row: 1; grid-row: 1;
grid-column: 5; grid-column: 5;
} }
@media (max-width: 700px) {
#home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto h5:nth-of-type(3) {
grid-row: 9;
grid-column: 1;
}
}
#home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto p { #home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto p {
font-size: 1rem; font-size: 1rem;
font-weight: 400; font-weight: 400;
@ -1506,17 +1524,31 @@ footer {
} }
@media (max-width: 700px) { @media (max-width: 700px) {
#home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto svg:nth-of-type(1) { #home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto svg:nth-of-type(1) {
width: 200px; width: 315px;
} }
} }
#home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto svg:nth-of-type(2) { #home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto svg:nth-of-type(2) {
grid-row: 3; grid-row: 3;
grid-column: inherit; grid-column: inherit;
} }
@media (max-width: 700px) {
#home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto svg:nth-of-type(2) {
grid-row: 5;
grid-column: 1;
width: 315px;
}
}
#home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto svg:nth-of-type(3) { #home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto svg:nth-of-type(3) {
grid-row: 1/span 2; grid-row: 1/span 2;
grid-column: 5/span 6; grid-column: 5/span 6;
} }
@media (max-width: 700px) {
#home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto svg:nth-of-type(3) {
grid-row: 9/span 9;
grid-column: 1/span 2;
width: 315px;
}
}
#home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto p:nth-of-type(1) { #home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto p:nth-of-type(1) {
grid-row: 3; grid-row: 3;
grid-column: 1/span 2; grid-column: 1/span 2;
@ -1524,10 +1556,22 @@ footer {
#home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto p:nth-of-type(2) { #home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto p:nth-of-type(2) {
grid-row: 1; grid-row: 1;
} }
@media (max-width: 700px) {
#home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto p:nth-of-type(2) {
grid-row: 7;
grid-column: 1/span 2;
}
}
#home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto p:nth-of-type(3) { #home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto p:nth-of-type(3) {
grid-row: 3; grid-row: 3;
grid-column: 5; grid-column: 5;
} }
@media (max-width: 700px) {
#home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto p:nth-of-type(3) {
grid-row: 8;
grid-column: 1/span 2;
}
}
#home .paragraph--type--static-parts:not(#paragraph-id--7) #svg1 { #home .paragraph--type--static-parts:not(#paragraph-id--7) #svg1 {
display: none; display: none;
} }

View File

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