responsive page /ressources

web/themes/custom/reha/dist/css/bundle.css

@@ -3231,6 +3231,13 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div
   max-height: 17rem;
   padding-bottom: 5rem;
 }
+@media (max-width: 450px) {
+  .page-ressources .view-ressources #views-exposed-form-ressources-page-1 {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 6rem;
+  }
+}
 .page-ressources .view-ressources #views-exposed-form-ressources-page-1::before {
   content: "FILTRER :";
   grid-column: 1;
@@ -3238,10 +3245,20 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div
   display: block;
   line-height: 5;
 }
+@media (max-width: 450px) {
+  .page-ressources .view-ressources #views-exposed-form-ressources-page-1::before {
+    line-height: 3;
+  }
+}
 .page-ressources .view-ressources #views-exposed-form-ressources-page-1 .form-item, .page-ressources .view-ressources #views-exposed-form-ressources-page-1 .form-actions {
   padding-bottom: 0.5rem;
   align-self: end;
 }
+@media (max-width: 450px) {
+  .page-ressources .view-ressources #views-exposed-form-ressources-page-1 .form-item, .page-ressources .view-ressources #views-exposed-form-ressources-page-1 .form-actions {
+    align-self: auto;
+  }
+}
 .page-ressources .view-ressources #views-exposed-form-ressources-page-1 .form-item-combine {
   grid-column: 1/span 8;
   grid-row: 2;
@@ -3251,16 +3268,31 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div
   grid-row: 3;
   width: 45%;
 }
+@media (max-width: 450px) {
+  .page-ressources .view-ressources #views-exposed-form-ressources-page-1 .js-form-item-field-site-target-id {
+    width: 100%;
+  }
+}
 .page-ressources .view-ressources #views-exposed-form-ressources-page-1 .form-item-field-themes-target-id {
   grid-column: 3/span 4;
   grid-row: 3;
   width: 45%;
 }
+@media (max-width: 450px) {
+  .page-ressources .view-ressources #views-exposed-form-ressources-page-1 .form-item-field-themes-target-id {
+    width: 100%;
+  }
+}
 .page-ressources .view-ressources #views-exposed-form-ressources-page-1 .form-item-field-type-de-ressource-target-id {
   width: 45%;
   grid-column: 5/span 6;
   grid-row: 3;
 }
+@media (max-width: 450px) {
+  .page-ressources .view-ressources #views-exposed-form-ressources-page-1 .form-item-field-type-de-ressource-target-id {
+    width: 100%;
+  }
+}
 .page-ressources .view-ressources #views-exposed-form-ressources-page-1 .form-select {
   background: white;
   border: solid gray 1px;
@@ -3291,6 +3323,12 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div
   transform: scale(1.05);
   transition: 0.3s transform ease, 0.3s box-shadow ease;
 }
+@media (max-width: 450px) {
+  .page-ressources .view-ressources .views-row {
+    width: 100%;
+    margin-bottom: 3rem;
+  }
+}
 .page-ressources .view-ressources .views-row .node-type-ressource {
   width: 100%;
   display: flex !important;

web/themes/custom/reha/scss/pages/_ressources.scss

@@ -24,18 +24,29 @@
             height: fit-content;
             max-height: 17rem;
             padding-bottom: 5rem;
+            @media (max-width:450px){
+                display: flex;
+                flex-direction: column;
+                margin-bottom: 6rem;
+            }
             &::before{
                 content: 'FILTRER :';
                 grid-column: 1;
                 grid-row: 1;
                 display: block;
                 line-height: 5;   
+                @media (max-width:450px){
+                line-height: 3; 
+                }
                 
             }
             .form-item, .form-actions{ 
                 // margin: 1rem;
                 padding-bottom: 0.5rem;
                 align-self: end;
+                @media (max-width:450px){
+                    align-self: auto; 
+                }
             }
             .form-item-combine{
                 grid-column: 1 /span 8;
@@ -47,17 +58,25 @@
                 grid-column: 1 /span 4;
                 grid-row: 3;
                 width: 45%;
+                @media (max-width:450px){
+                    width: 100%; 
+                }
             }
             .form-item-field-themes-target-id{
                 grid-column: 3 /span 4;
                 grid-row: 3;
                 width: 45%;
-                
+                @media (max-width:450px){
+                    width: 100%; 
+                }
             }
             .form-item-field-type-de-ressource-target-id{
                 width: 45%;
                 grid-column: 5 /span 6;
                 grid-row: 3;
+                @media (max-width:450px){
+                    width: 100%; 
+                }
             }
             
             .form-select{
@@ -92,6 +111,10 @@
                 transform: scale(1.05);
                 transition: 0.3s transform ease, 0.3s box-shadow ease;   
             }
+            @media (max-width:450px){
+                width: 100%; 
+                margin-bottom: 3rem;
+            }
             .node-type-ressource{             
                 width: 100%;
                 // margin: auto;