mobile page consultation

This commit is contained in:
2024-07-07 14:32:42 +02:00
parent e489a10c5b
commit 713e5df873
4 changed files with 143 additions and 10 deletions

View File

@ -181,10 +181,9 @@ h3 {
width: 100%;
padding-top: 320px;
}
@media (max-width: 500px) {
.layout-content {
padding-top: 50px;
.layout-container main {
padding-top: 110px;
}
}
@ -233,6 +232,11 @@ header {
transition: height 0.3s, padding 0.3s; /* Add transition for smooth resizing */
/* Classes for scroll effect */
}
@media (max-width: 500px) {
header {
height: 110px;
}
}
header .contextual-region {
width: max-content;
}
@ -351,13 +355,31 @@ header .header_nav_container #block-quartiers-de-demain-entete ul {
position: relative;
top: 80px;
padding-left: 1rem;
padding-right: 1rem;
margin: 0;
}
@media (max-width: 500px) {
header .header_nav_container #block-quartiers-de-demain-entete ul {
top: 27.5px;
}
}
@media (max-width: 500px) {
header .header_nav_container #block-quartiers-de-demain-entete ul li {
padding-top: 0.3rem;
}
}
header .header_nav_container #block-quartiers-de-demain-entete ul li a {
text-transform: uppercase;
color: white;
font-size: 0.5rem;
}
@media (max-width: 500px) {
header .header_nav_container #block-quartiers-de-demain-entete ul li a {
display: flex;
flex-direction: column;
align-items: flex-start;
}
}
header .header_nav_container #block-quartiers-de-demain-entete ul li:not(:last-of-type) ::after {
content: "";
display: block;
@ -1372,6 +1394,13 @@ footer {
font-size: 2.5rem;
font-weight: 500;
}
@media (max-width: 500px) {
#consultation .layout-content .content_container .node-type-static #paragraph-id--10 .field_field_title {
font-size: 2.2rem;
padding: 0rem;
padding-top: 2rem;
}
}
#consultation .layout-content .content_container .node-type-static #paragraph-id--10 .colone-picto {
display: flex;
flex-direction: row;
@ -1384,6 +1413,11 @@ footer {
padding: 0.5rem;
margin-top: 0;
}
@media (max-width: 500px) {
#consultation .layout-content .content_container .node-type-static #paragraph-id--10 .colone-picto p:not(:last-of-type) {
flex: 1 25%;
}
}
#consultation .layout-content .content_container .node-type-static #paragraph-id--10 .colone-picto p:not(:last-of-type)::before {
content: "";
display: block;
@ -1391,12 +1425,22 @@ footer {
height: 30%;
margin-bottom: 0.5rem;
}
@media (max-width: 500px) {
#consultation .layout-content .content_container .node-type-static #paragraph-id--10 .colone-picto p:not(:last-of-type)::before {
height: 15%;
}
}
#consultation .layout-content .content_container .node-type-static #paragraph-id--10 .colone-picto p:last-of-type {
color: black;
width: 55%;
padding-top: 2rem;
margin: auto;
}
@media (max-width: 500px) {
#consultation .layout-content .content_container .node-type-static #paragraph-id--10 .colone-picto p:last-of-type {
width: 80%;
}
}
#consultation .layout-content .content_container .node-type-static #paragraph-id--11 {
width: 65%;
background-color: white;
@ -1407,17 +1451,33 @@ footer {
padding: 1rem;
margin-bottom: 1rem;
}
@media (max-width: 500px) {
#consultation .layout-content .content_container .node-type-static #paragraph-id--11 {
width: 90%;
}
}
#consultation .layout-content .content_container .node-type-static #paragraph-id--11 .field_field_title {
color: rgb(7, 50, 194);
font-size: 1.2rem;
font-weight: 500;
}
@media (max-width: 500px) {
#consultation .layout-content .content_container .node-type-static #paragraph-id--11 .field_field_title {
width: 80%;
}
}
#consultation .layout-content .content_container .node-type-static #paragraph-id--11 .colone-picto {
display: grid;
grid-template-columns: auto auto;
grid-template-rows: auto auto;
padding: 1rem;
}
@media (max-width: 500px) {
#consultation .layout-content .content_container .node-type-static #paragraph-id--11 .colone-picto {
padding-left: 0;
padding-right: 0;
}
}
#consultation .layout-content .content_container .node-type-static #paragraph-id--11 .colone-picto p {
flex: 1 15%;
padding: 0rem;
@ -1455,6 +1515,12 @@ footer {
align-items: center;
padding: 1rem;
}
@media (max-width: 500px) {
#consultation .layout-content .content_container .node-type-static #paragraph-id--12,
#consultation .layout-content .content_container .node-type-static #paragraph-id--13 {
width: 90%;
}
}
#consultation .layout-content .content_container .node-type-static #paragraph-id--12 .field_field_title,
#consultation .layout-content .content_container .node-type-static #paragraph-id--13 .field_field_title {
color: rgb(7, 50, 194);
@ -1462,6 +1528,12 @@ footer {
font-weight: 500;
padding-bottom: 1.5rem;
}
@media (max-width: 500px) {
#consultation .layout-content .content_container .node-type-static #paragraph-id--12 .field_field_title,
#consultation .layout-content .content_container .node-type-static #paragraph-id--13 .field_field_title {
padding-bottom: 0.8rem;
}
}
#consultation .layout-content .content_container .node-type-static #paragraph-id--12::after {
content: "";
display: block;
@ -1474,9 +1546,19 @@ footer {
flex-direction: row;
justify-content: space-between;
}
@media (max-width: 500px) {
#consultation .layout-content .content_container .node-type-static #paragraph-id--13 .field_field_texte .colone-picto {
flex-direction: column;
}
}
#consultation .layout-content .content_container .node-type-static #paragraph-id--13 .field_field_texte .colone-picto p {
width: 30%;
}
@media (max-width: 500px) {
#consultation .layout-content .content_container .node-type-static #paragraph-id--13 .field_field_texte .colone-picto p {
width: 100%;
}
}
.partenaires {
background-color: #f6f7f3;