responsive /ressources

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

@@ -292,6 +292,11 @@ header .language-switcher-language-url ul .is-active {
   header {
     height: 100vh;
   }
+  header header {
+    position: relative;
+    flex-direction: column;
+    height: auto !important;
+  }
 }
 header .contextual-region {
   width: max-content;
@@ -803,16 +808,11 @@ footer {
   margin: 1rem 2rem;
   background-color: transparent;
 }
-@media (max-width: 891px) {
+@media (max-width: 810px) {
-  .layout-sidebar-first {
-    margin-left: 5%;
-    margin-top: 9rem;
-  }
-}
-@media (max-width: 500px) {
   .layout-sidebar-first {
+    position: relative;
     width: 80%;
-    margin-top: 3rem;
+    top: 160px;
   }
 }
 .layout-sidebar-first #block-quartiers-de-demain-formulaireexposeressourcespage-1,
@@ -821,6 +821,13 @@ footer {
   padding: 0.3rem 1rem 1rem 1rem;
   width: 100%;
 }
+@media (max-width: 810px) {
+  .layout-sidebar-first #block-quartiers-de-demain-formulaireexposeressourcespage-1,
+  .layout-sidebar-first #block-quartiers-de-demain-formulaireexposeactuspage-1 {
+    display: flex;
+    flex-direction: column;
+  }
+}
 .layout-sidebar-first #block-quartiers-de-demain-formulaireexposeressourcespage-1 h2,
 .layout-sidebar-first #block-quartiers-de-demain-formulaireexposeactuspage-1 h2 {
   text-transform: uppercase;
@@ -831,6 +838,26 @@ footer {
 .layout-sidebar-first #block-quartiers-de-demain-formulaireexposeactuspage-1 h2::after {
   content: " :";
 }
+@media (max-width: 810px) {
+  .layout-sidebar-first #block-quartiers-de-demain-formulaireexposeressourcespage-1 form .js-form-item,
+  .layout-sidebar-first #block-quartiers-de-demain-formulaireexposeactuspage-1 form .js-form-item {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+}
+.layout-sidebar-first #block-quartiers-de-demain-formulaireexposeressourcespage-1 form .js-form-item input,
+.layout-sidebar-first #block-quartiers-de-demain-formulaireexposeactuspage-1 form .js-form-item input {
+  max-width: 100%;
+}
+@media (max-width: 810px) {
+  .layout-sidebar-first #block-quartiers-de-demain-formulaireexposeressourcespage-1 form,
+  .layout-sidebar-first #block-quartiers-de-demain-formulaireexposeactuspage-1 form {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+}
 .layout-sidebar-first #block-quartiers-de-demain-formulaireexposeressourcespage-1 .js-form-type-select,
 .layout-sidebar-first #block-quartiers-de-demain-formulaireexposeactuspage-1 .js-form-type-select {
   display: flex;
@@ -859,6 +886,12 @@ footer {
   font-family: "gilroy-medium";
   padding-bottom: 0.2rem;
 }
+@media (max-width: 810px) {
+  .layout-sidebar-first #block-quartiers-de-demain-formulaireexposeressourcespage-1 .js-form-type-select select,
+  .layout-sidebar-first #block-quartiers-de-demain-formulaireexposeactuspage-1 .js-form-type-select select {
+    width: 100%;
+  }
+}
 .layout-sidebar-first #block-quartiers-de-demain-formulaireexposeressourcespage-1 .js-form-type-textfield label,
 .layout-sidebar-first #block-quartiers-de-demain-formulaireexposeactuspage-1 .js-form-type-textfield label {
   text-transform: lowercase;
@@ -878,6 +911,7 @@ footer {
   background-color: white;
   border: solid black 0.5px;
   width: 45%;
+  max-width: 100% !important;
   padding: 0.3rem 0.2rem;
   font-size: 0.7rem;
   font-family: "gilroy-light";
@@ -1568,6 +1602,12 @@ footer {
   flex-direction: column;
   flex-wrap: wrap;
 }
+@media (max-width: 810px) {
+  #actus-caroussel .content-actus .view-rows-wrapper {
+    margin-left: 5%;
+    width: 90%;
+  }
+}
 #actus-caroussel .content-actus .view-rows-wrapper .views-row {
   display: flex;
   margin: auto;
@@ -1589,6 +1629,12 @@ footer {
   grid-template-columns: 1fr 2fr;
   grid-template-rows: repeat(5 1fr);
 }
+@media (max-width: 810px) {
+  #actus-caroussel .content-actus .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu {
+    display: flex;
+    flex-direction: column;
+  }
+}
 #actus-caroussel .content-actus .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu .field_field_images {
   grid-column: 1;
   grid-row: 1/span 5;
@@ -3338,8 +3384,6 @@ body {
 #page-node .content_container .node-type-actualite div .field_body {
   order: 2;
   padding-bottom: 2rem;
-  opacity: 1 !important;
-  display: block !important;
   font-family: "gilroy-light";
 }
 #page-node .content_container .node-type-actualite div .field_body p {
@@ -3998,6 +4042,12 @@ main {
 #ressources {
   background-color: #f6f7f3;
 }
+@media (max-width: 810px) {
+  #ressources main {
+    display: flex;
+    flex-direction: column-reverse;
+  }
+}
 #ressources .layout-content .content_container {
   display: flex;
   flex-direction: column;
@@ -4012,7 +4062,9 @@ main {
 }
 @media (max-width: 810px) {
   #ressources .layout-content .content_container #block-quartiers-de-demain-titredepage {
-    margin-top: 14rem;
+    display: flex;
+    margin: auto;
+    margin-top: 10rem;
   }
 }
 #ressources .layout-content .content_container #block-quartiers-de-demain-titredepage h1 {
@@ -4027,6 +4079,12 @@ main {
   margin-left: 15%;
   width: 60%;
 }
+@media (max-width: 810px) {
+  #ressources .layout-content .content_container .views-element-container {
+    margin-left: 0%;
+    width: 90%;
+  }
+}
 #ressources .layout-content .content_container .views-element-container h3 {
   text-align: center;
 }
@@ -4269,6 +4327,12 @@ main {
   background-color: white;
   padding-bottom: 0;
 }
+@media (max-width: 810px) {
+  #actualites main {
+    display: flex;
+    flex-direction: column-reverse;
+  }
+}
 #actualites .layout-container main {
   padding-top: 250px;
 }
@@ -4286,6 +4350,8 @@ main {
 }
 @media (max-width: 810px) {
   #actualites .layout-content .content_container #block-quartiers-de-demain-titredepage {
+    display: flex;
+    margin: auto;
     margin-top: 14rem;
   }
 }
@@ -4313,6 +4379,12 @@ main {
   flex-direction: row;
   align-items: center;
 }
+@media (max-width: 810px) {
+  #actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row {
+    margin-left: 5%;
+    width: 90%;
+  }
+}
 #actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row:not(:last-of-type) {
   border-bottom: solid black 0.5px;
 }
@@ -4324,6 +4396,12 @@ main {
   grid-template-columns: 1fr 2fr;
   grid-template-rows: repeat(5 1fr);
 }
+@media (max-width: 810px) {
+  #actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu {
+    display: flex;
+    flex-direction: column;
+  }
+}
 #actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu .field_field_images {
   grid-column: 1;
   grid-row: 1/span 5;

web/themes/custom/quartiers_de_demain/src/assets/js/quartiers_de_demain.js

@@ -709,7 +709,7 @@ if (documentsLiensWrapper && blockRegionThird) {
 }
 });
 
-
+/////////////////// start langswitcher position responsive//////////////////////
 document.addEventListener("DOMContentLoaded", function () {
 // Fonction pour déplacer le bloc en fonction de la taille de l'écran
 function moveLanguageSwitcher() {
@@ -733,7 +733,7 @@ moveLanguageSwitcher();
 window.addEventListener("resize", moveLanguageSwitcher);
 });
 
-///////////////////////////////////////////////////////////////
+/////////////////// end langswitcher position responsive///////////////////////////////////////////////////////////
 
 /////////////// start class à view-rows-ressources ////////
 $(document).ready(function () {
@@ -811,7 +811,7 @@ $(document).ready(function () {
 
 /////////////////// start voir plus...  actualite dans /actualites & /home ////////////////////
 $(document).ready(function () {
-  // if ($("#actualites").length > 0) {
+  if ($("#actualites" ).length > 0 || $("#home").length > 0)  {
     $(".node-type-actualite").each(function () {
       let article = $(this);
 
@@ -831,7 +831,7 @@ $(document).ready(function () {
           $(this).toggleClass("open");
       });
   });
-  // }
+  }
 });
 
 

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

@@ -42,8 +42,8 @@
                     .field_body {
                         order: 2;
                         padding-bottom: 2rem;
-                        opacity:1 !important;
+                        // opacity:1 !important;
-                        display: block !important;
+                        // display: block !important;
                         font-family: "gilroy-light" ;
                         p{
                         font-size: 0.8rem;

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

@@ -5,6 +5,10 @@
     main{
         background-color:white ;
         padding-bottom: 0;
+        @media(max-width: 810px){
+            display: flex;
+            flex-direction: column-reverse;
+        }
     }
     .layout-container main{
         padding-top: $header-height-big;
@@ -24,6 +28,8 @@
                 margin-bottom: 4rem;
                 width: 70%;
                 @media(max-width: 810px){
+                    display: flex;
+                    margin:auto;
                     margin-top: 14rem;
                 }
                 h1{
@@ -47,8 +53,6 @@
                     flex-wrap: wrap;
                     background-color: white;
                     // margin-left: 20%;
-                   
-                    
                     
                     .views-row{
                         width: 60%;
@@ -59,6 +63,10 @@
                         display: flex;
                         flex-direction: row;
                         align-items: center;
+                        @media(max-width: 810px){
+                            margin-left: 5%;
+                            width: 90%;
+                        } 
                         &:not(:last-of-type){
                             border-bottom: solid black 0.5px;}
                         .node-type-actualite{
@@ -69,6 +77,10 @@
                                 display: grid;
                                 grid-template-columns: 1fr 2fr;
                                 grid-template-rows: repeat(5 1fr);
+                                @media(max-width: 810px){
+                                    display: flex;
+                                    flex-direction: column;
+                                 }
                                 .field_field_images{
                                    grid-column: 1;
                                    grid-row: 1 /span 5;

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

@@ -2,9 +2,15 @@
 #ressources{
     background-color: #f6f7f3;
 
-
+    main{
+        @media(max-width: 810px){
+            display: flex;
+            flex-direction: column-reverse;
+        }
+    }
     .layout-content{
         // padding-top: 1rem;
+
         .content_container{
             display: flex;
             flex-direction: column;
@@ -17,7 +23,9 @@
                 margin-bottom: 1rem;
                 width: 70%;
                 @media(max-width: 810px){
-                    margin-top: 14rem;
+                    display: flex;
+                    margin:auto;
+                    margin-top: 10rem;
                 }
                 h1{
                     width: fit-content;
@@ -33,6 +41,10 @@
             .views-element-container{
                 margin-left: 15%;
                 width: 60%;
+                @media(max-width: 810px){
+                    margin-left: 0%;
+                    width: 90%;
+                } 
                 h3{
                     &::before{
                         content:"";

web/themes/custom/quartiers_de_demain/src/assets/scss/partials/actu-caroussel-home.scss

@@ -33,7 +33,11 @@
             width: 65%;
             display: flex;
             flex-direction: column;
-            flex-wrap: wrap;    
+            flex-wrap: wrap; 
+            @media(max-width: 810px){
+                margin-left: 5%;
+                width: 90%;
+            }   
             .views-row{
                 display: flex;
                 margin: auto;
@@ -54,6 +58,10 @@
                         display: grid;
                         grid-template-columns: 1fr 2fr;
                         grid-template-rows: repeat(5 1fr);
+                        @media(max-width: 810px){
+                           display: flex;
+                           flex-direction: column;
+                        }
                         .field_field_images{
                         grid-column: 1;
                         grid-row: 1 /span 5;

web/themes/custom/quartiers_de_demain/src/assets/scss/partials/aside.scss

@@ -7,38 +7,22 @@
     // z-index: 98;
     margin: 1rem 2rem;
     background-color: transparent;
-
+    @media(max-width: 810px){
-    @media(max-width:891px){
+        position: relative;
-        margin-left: 5%;
-        margin-top: 9rem;
-    }
-    @media (max-width:500px) {
         width: 80%;
-        margin-top: 3rem;
+        top: $header-height-pad;
-    }
+    } 
 
 
-    // #block-quartiers-de-demain-formulaireexposeactuspage-1{
-    //     h2{
-    //         text-transform: uppercase;
-    //         font-family: "gilroy-medium";
-    //         font-size: 0.7rem;
-    //         &::after{
-    //             content: ' :';
-    //         }
-    //     }
-    //     label{
-    //         text-transform: lowercase;
-    //         font-size: 0.7rem;
-    //         font-family: 'gilroy-light';
-    //     }
-    // }
-
     #block-quartiers-de-demain-formulaireexposeressourcespage-1,     
     #block-quartiers-de-demain-formulaireexposeactuspage-1{
         background-color: white;
         padding: 0.3rem 1rem 1rem 1rem;
         width: 100%;
+        @media(max-width: 810px){
+            display: flex;
+            flex-direction: column;
+        }
         h2{
             text-transform: uppercase;
             font-family: "gilroy-medium";
@@ -47,6 +31,26 @@
                 content: ' :';
             }   
         }
+        form{
+            
+            .js-form-item{
+                @media(max-width: 810px){
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: space-between;
+                }
+                input{
+                    max-width: 100%;
+
+                }
+            }
+            @media(max-width: 810px){
+                display: flex;
+                flex-direction: column;
+                justify-content: space-between;
+            }
+        }
+        
         .js-form-type-select{
             display: flex;
             flex-direction: row;
@@ -70,6 +74,9 @@
                 font-size: 0.6rem;
                 font-family: 'gilroy-medium';
                 padding-bottom: 0.2rem;
+                @media(max-width: 810px){
+                    width: 100%;
+                }
             }
         }
         .js-form-type-textfield{
@@ -90,10 +97,11 @@
                 background-color: white;
                 border: solid black 0.5px;
                 width: 45%;
+                max-width: 100% !important;
                 padding: 0.3rem 0.2rem;
                 font-size: 0.7rem;
                 font-family: 'gilroy-light';
             }
         }
     }
-}
+}

web/themes/custom/quartiers_de_demain/src/assets/scss/partials/header.scss

@@ -53,6 +53,11 @@ header{
     
     @media(max-width: 810px){
         height: 100vh;
+        header {
+            position: relative;
+            flex-direction: column;
+            height: auto !important;
+          }
     }
 
     .contextual-region{
@@ -191,6 +196,7 @@ header{
             // text-align:left;
             // height: fit-content;
         }
+        
         @media(max-width: 500px){
             flex: 0 0 40%;
         }