From 9d9070d61f375e1ab6c2f0b6f7221f4e0a7d34c0 Mon Sep 17 00:00:00 2001
From: ouidade <ouidade@figureslibres.io>
Date: Thu, 10 Mar 2022 13:26:40 +0100
Subject: [PATCH] responsive offres services

---
 web/themes/custom/eql/css-compiled/styles.css | 20 ++++-------
 .../eql/scss/pages/_offresdeservices.scss     | 33 +++++++++++--------
 2 files changed, 27 insertions(+), 26 deletions(-)

diff --git a/web/themes/custom/eql/css-compiled/styles.css b/web/themes/custom/eql/css-compiled/styles.css
index 666cdcd..dd53827 100644
--- a/web/themes/custom/eql/css-compiled/styles.css
+++ b/web/themes/custom/eql/css-compiled/styles.css
@@ -1877,22 +1877,11 @@ a {
     margin-top: 4rem;
     background-color: #009ee3;
     height: fit-content;
-    width: 60%;
+    min-height: fit-content;
+    width: 200px;
     margin-left: 2rem;
     aspect-ratio: 1/1;
     display: flex; }
-    @media (max-width: 1260px) {
-      .offresdeservices .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-block-content7dc5bc6b-f5ca-4815-b689-49382aafa2dc {
-        width: 70%; } }
-    @media (max-width: 1073px) {
-      .offresdeservices .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-block-content7dc5bc6b-f5ca-4815-b689-49382aafa2dc {
-        width: 80%; } }
-    @media (max-width: 935px) {
-      .offresdeservices .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-block-content7dc5bc6b-f5ca-4815-b689-49382aafa2dc {
-        width: 90%; } }
-    @media (max-width: 810px) {
-      .offresdeservices .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-block-content7dc5bc6b-f5ca-4815-b689-49382aafa2dc {
-        width: 100%; } }
     .offresdeservices .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-block-content7dc5bc6b-f5ca-4815-b689-49382aafa2dc .field--name-field-lien {
       display: flex;
       flex-direction: column;
@@ -2016,6 +2005,11 @@ a {
           flex-direction: column; }
           .offresdeservices .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockoffres-de--block-1 .view-content .views-row {
             width: 100%; } }
+  @media (max-width: 810px) {
+    .offresdeservices .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content {
+      display: flex;
+      flex-direction: column;
+      padding: 2rem; } }
 
 .page-node-type-offre-de-service {
   background: url("../images/pictos/carre-contour-bleu-offre.svg");
diff --git a/web/themes/custom/eql/scss/pages/_offresdeservices.scss b/web/themes/custom/eql/scss/pages/_offresdeservices.scss
index fa175af..d5b3d3f 100644
--- a/web/themes/custom/eql/scss/pages/_offresdeservices.scss
+++ b/web/themes/custom/eql/scss/pages/_offresdeservices.scss
@@ -54,23 +54,24 @@
                             margin-top: 4rem;
                             background-color: $blue-light;
                             height: fit-content;
-                            width: 60%;
+                            min-height: fit-content;
+                            width: 200px;
                             // width: 80%;
                             margin-left: 2rem;
                             aspect-ratio: 1/1;
                             display: flex;
-                            @media (max-width: 1260px) {
-                                width: 70%;
-                            }
-                            @media (max-width: 1073px) {
-                                width: 80%;
-                            }
-                            @media (max-width: 935px) {
-                                width: 90%;
-                            }
-                            @media (max-width: 810px) {
-                                width: 100%;
-                            }
+                            // @media (max-width: 1260px) {
+                            //     width: 70%;
+                            // }
+                            // @media (max-width: 1073px) {
+                            //     width: 80%;
+                            // }
+                            // @media (max-width: 935px) {
+                            //     width: 90%;
+                            // }
+                            // @media (max-width: 810px) {
+                            //     width: 100%;
+                            // }
                             .field--name-field-lien{
                                 display: flex;
                                 flex-direction: column;
@@ -283,6 +284,12 @@
                                 }
                             }
                         }
+
+                        @media (max-width: 810px){
+                            display: flex;
+                            flex-direction: column;
+                            padding: 2rem;
+                        }
                     }
                 }
             }