responsive /lesprojets

web/modules/custom/q2d_mod/assets/css/carte-interactive-qdd.css

@@ -18,18 +18,19 @@
 @media (max-width: 810px) {
   #sites-map-container {
     width: 80%;
+    
   }
 }
 @media (max-width: 530px) {
   #sites-map-container {
     width: 100%;
-    height: 485px;
+    height:396px;
   }
 }
 @media (max-width: 400px) {
   #sites-map-container {
     width: 100%;
-    height: 430px;
+    
   }
 }
 #sites-map-container .site-link:hover {

web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css

@@ -4729,6 +4729,11 @@ body {
     width: 100%;
   }
 }
+@media (max-width: 810px) {
+  .node-type-ressource .layout--threecol-25-50-25 .layout__region--first {
+    order: 2;
+  }
+}
 .node-type-ressource .layout--threecol-25-50-25 .layout__region--first .block-region-first #sites-map-container {
   width: 100% !important;
   padding-left: 1rem;
@@ -4742,6 +4747,11 @@ body {
 .node-type-ressource .layout--threecol-25-50-25 .layout__region--first .block-region-first #sites-map-container h2::after {
   content: " :";
 }
+@media (max-width: 810px) {
+  .node-type-ressource .layout--threecol-25-50-25 .layout__region--first .block-region-first #sites-map-container h2 {
+    font-size: 1rem;
+  }
+}
 .node-type-ressource .layout--threecol-25-50-25 .layout__region--first .block-region-first .field_field_link div {
   display: flex;
   justify-content: center;
@@ -4759,6 +4769,11 @@ body {
   padding-top: 0.2rem;
   padding-left: 0.2rem;
 }
+@media (max-width: 810px) {
+  .node-type-ressource .layout--threecol-25-50-25 .layout__region--first .block-region-first .field_field_link a {
+    font-size: 1rem;
+  }
+}
 .node-type-ressource .layout--threecol-25-50-25 .layout__region--first .block-region-first .field_field_link a::before {
   display: inline-flex;
   content: url("../img/noun-arrow-to-left.svg");
@@ -4772,6 +4787,13 @@ body {
   margin-top: 3rem;
   margin-right: 2rem;
 }
+@media (max-width: 810px) {
+  .node-type-ressource .layout--threecol-25-50-25 .layout__region--second {
+    order: 1;
+    margin-top: 3rem;
+    margin-right: 0;
+  }
+}
 .node-type-ressource .layout--threecol-25-50-25 .layout__region--second .block-region-second {
   display: flex;
   flex-direction: column;
@@ -4779,10 +4801,11 @@ body {
   margin-left: 2rem;
   margin-right: 3rem;
 }
-@media (max-width: 500px) {
+@media (max-width: 810px) {
   .node-type-ressource .layout--threecol-25-50-25 .layout__region--second .block-region-second {
-    margin-left: 0.5rem;
+    margin-left: 0rem;
-    margin-top: 1rem;
+    margin-top: 0rem;
+    margin-right: 0rem;
   }
 }
 .node-type-ressource .layout--threecol-25-50-25 .layout__region--second .block-region-second .field_title,
@@ -4931,11 +4954,22 @@ body {
     flex-direction: column !important;
   }
 }
+@media (max-width: 810px) {
+  .node-type-ressource .layout--threecol-25-50-25 .layout__region--second .block-region-second div:has(.field_field_images) .diaporama .images {
+    margin: auto;
+  }
+}
 .node-type-ressource .layout--threecol-25-50-25 .layout__region--second .block-region-second div:has(.field_field_images) .diaporama .images img {
   object-fit: cover;
   width: 220px !important;
   height: 145px;
 }
+@media (max-width: 810px) {
+  .node-type-ressource .layout--threecol-25-50-25 .layout__region--second .block-region-second div:has(.field_field_images) .diaporama .images img {
+    width: 100% !important;
+    height: auto;
+  }
+}
 .node-type-ressource .layout--threecol-25-50-25 .layout__region--second .block-region-second div:has(.field_field_images) .diaporama .image-field-caption {
   margin: 0;
 }
@@ -4944,6 +4978,11 @@ body {
   font-size: 0.5rem;
   font-family: "gilroy-light";
 }
+@media (max-width: 810px) {
+  .node-type-ressource .layout--threecol-25-50-25 .layout__region--second .block-region-second div:has(.field_field_images) .diaporama .image-field-caption p {
+    font-size: 1rem;
+  }
+}
 .node-type-ressource .layout--threecol-25-50-25 .layout__region--second .block-region-second div:has(.field--name-field-documents) {
   order: 5;
   margin-top: 0.5rem;
@@ -5151,6 +5190,11 @@ main {
   position: relative;
   transition: transform 0.4s ease-in-out;
 }
+@media (max-width: 810px) {
+  #lesprojets .content_container .views-element-container .views-row .views-field-group {
+    font-size: 1rem;
+  }
+}
 #lesprojets .content_container .views-element-container .views-row .views-field-group:hover {
   transform: scale(1.05);
 }
@@ -5339,6 +5383,11 @@ main {
   margin-top: 0.3rem;
   font-family: "gilroy-bold";
 }
+@media (max-width: 810px) {
+  #lesprojets .content_container .views-element-container .views-row .views-field-field-projets-lie .field-content ul li .node-type-projet .node-projet-title {
+    font-size: 1rem;
+  }
+}
 #lesprojets .content_container .views-element-container .views-row .views-field-field-projets-lie .field-content ul li .node-type-projet .field_field_nom_de_l_equipe {
   order: 4;
 }
@@ -5347,6 +5396,11 @@ main {
   margin: 0;
   text-transform: uppercase;
 }
+@media (max-width: 810px) {
+  #lesprojets .content_container .views-element-container .views-row .views-field-field-projets-lie .field-content ul li .node-type-projet .field_field_nom_de_l_equipe h3 {
+    font-size: 0.8rem;
+  }
+}
 #lesprojets .content_container .views-element-container .views-row .views-field-field-projets-lie .field-content ul li .node-type-projet .field_field_intro {
   order: 5;
   display: none;

web/themes/custom/quartiers_de_demain/src/assets/scss/pages/lesprojets.scss

@@ -59,6 +59,9 @@ main{
                     margin-bottom: 2rem;
                     font-size: 0.4rem;
                     position: relative;
+                    @media(max-width: 810px){
+                        font-size: 1rem;   
+                    }
                     transition: transform 0.4s ease-in-out; 
                     &:hover {
                         transform: scale(1.05); 
@@ -220,6 +223,9 @@ main{
                                         margin-bottom: 0.3rem;
                                         margin-top: 0.3rem;
                                         font-family: "gilroy-bold";
+                                        @media(max-width: 810px){
+                                            font-size: 1rem;   
+                                        }
                                     }
                                     .field_field_nom_de_l_equipe{
                                         order: 4;
@@ -227,6 +233,9 @@ main{
                                             font-size: 0.5rem;
                                             margin: 0;
                                             text-transform: uppercase;
+                                            @media(max-width: 810px){
+                                                font-size: 0.8rem;   
+                                            }
                                         }
                                     }
                                     .field_field_intro{

web/themes/custom/quartiers_de_demain/src/assets/scss/pages/node-type-ressource.scss

@@ -13,8 +13,12 @@
             display: flex;
             flex-direction: column;
             width: 100%;
+
         }
         .layout__region--first{
+            @media(max-width: 810px){
+                order:2   
+            }
             .block-region-first{
                 #sites-map-container{
                     width: 100% !important;
@@ -27,6 +31,9 @@
                         &::after{
                             content: " :";
                         }
+                        @media(max-width: 810px){
+                            font-size: 1rem;   
+                        }
                     }
                 }                
 
@@ -47,6 +54,9 @@
                         padding-bottom: 0.2rem;
                         padding-top: 0.2rem;
                         padding-left: 0.2rem;
+                        @media(max-width: 810px){
+                            font-size: 1rem;   
+                        }
 
                         // svg{
                         //     display: none;
@@ -71,15 +81,21 @@
             margin-top: 3rem;
             margin-right: 2rem;
             // width: 60%;
+            @media(max-width: 810px){
+                order:1;  
+                margin-top: 3rem;
+                margin-right: 0;
+            }
             .block-region-second{
                 display: flex;
                 flex-direction: column;
                 flex-wrap: wrap;
                 margin-left: 2rem;
                 margin-right: 3rem;
-                @media(max-width: 500px){
+                @media(max-width: 810px){
-                    margin-left: 0.5rem;
+                    margin-left: 00rem;
-                    margin-top: 1rem;
+                    margin-top: 0rem;
+                    margin-right: 0rem;
                 }
                 .field_title, 
                 .field_field_sous_titre{
@@ -219,6 +235,7 @@
                 div:has(.field_field_images){
                     order: 10;
                     width: 100%;
+                   
                     .diaporama{
                         display: flex !important;
                         flex-direction: row !important;
@@ -231,10 +248,17 @@
                         }
                         .images{
                         //    margin: auto;
+                        @media (max-width:810px){
+                            margin: auto;
+                        }
                             img{
                                 object-fit: cover;
                                 width: 220px !important;
                                 height: 145px;
+                                @media (max-width:810px){
+                                    width: 100% !important;
+                                    height: auto;
+                                }
                             }
                         }
                         .image-field-caption{
@@ -244,6 +268,9 @@
                                 margin-top: 0;
                                 font-size: 0.5rem;
                                 font-family: 'gilroy-light';
+                                @media (max-width:810px){
+                                    font-size: 1rem;
+                                }
                             }
                         } 
                     }