From dfeab0a8c1be7478557023300347a825488f2044 Mon Sep 17 00:00:00 2001
From: ouidade <ouidade@figureslibres.io>
Date: Thu, 6 Jan 2022 22:03:50 +0100
Subject: [PATCH] smartphone offres de services

---
 web/themes/custom/eql/css-compiled/styles.css | 13 +++++++++++++
 web/themes/custom/eql/scss/pages/_offre.scss  | 15 +++++++++++++--
 2 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/web/themes/custom/eql/css-compiled/styles.css b/web/themes/custom/eql/css-compiled/styles.css
index a701c89..d4a98d8 100644
--- a/web/themes/custom/eql/css-compiled/styles.css
+++ b/web/themes/custom/eql/css-compiled/styles.css
@@ -1877,6 +1877,9 @@ a {
     display: grid;
     grid-template-columns: auto auto 1fr;
     grid-template-rows: repeat(6 auto); }
+    @media (max-width: 810px) {
+      .page-node-type-offre-de-service .layout__region--top .block-region-top {
+        margin-left: 8%; } }
     .page-node-type-offre-de-service .layout__region--top .block-region-top .block-entity-fieldnodefield-photo {
       width: fit-content;
       grid-column: 1;
@@ -1887,6 +1890,10 @@ a {
       .page-node-type-offre-de-service .layout__region--top .block-region-top .block-entity-fieldnodefield-photo img {
         width: 100%;
         height: auto; }
+      @media (max-width: 810px) {
+        .page-node-type-offre-de-service .layout__region--top .block-region-top .block-entity-fieldnodefield-photo {
+          width: 90px;
+          height: 90px; } }
     .page-node-type-offre-de-service .layout__region--top .block-region-top .block-entity-fieldnodefield-type-de-protagoniste {
       background: white;
       width: fit-content;
@@ -1931,6 +1938,9 @@ a {
       grid-row: 4;
       font-size: 2.5rem;
       font-family: "Source Code Pro"; }
+      @media (max-width: 810px) {
+        .page-node-type-offre-de-service .layout__region--top .block-region-top .block-entity-fieldnodetitle {
+          font-size: 1.2rem; } }
       .page-node-type-offre-de-service .layout__region--top .block-region-top .block-entity-fieldnodetitle a {
         color: black; }
     .page-node-type-offre-de-service .layout__region--top .block-region-top .block-entity-fieldnodefield-localisation {
@@ -1962,6 +1972,9 @@ a {
       display: flex;
       flex-direction: column;
       width: 70%; }
+      @media (max-width: 810px) {
+        .page-node-type-offre-de-service .layout__region--third .block-region-third {
+          margin: auto; } }
       .page-node-type-offre-de-service .layout__region--third .block-region-third .title-contact {
         background: #009ee3;
         color: white;
diff --git a/web/themes/custom/eql/scss/pages/_offre.scss b/web/themes/custom/eql/scss/pages/_offre.scss
index 7538304..857ffdf 100644
--- a/web/themes/custom/eql/scss/pages/_offre.scss
+++ b/web/themes/custom/eql/scss/pages/_offre.scss
@@ -15,6 +15,9 @@
                 display: grid;
                 grid-template-columns: auto auto 1fr;
                 grid-template-rows: repeat(6 auto);
+                @media (max-width: 810px){
+                    margin-left: 8%;
+                }
 
                 .block-entity-fieldnodefield-photo{
                     width: fit-content;
@@ -27,6 +30,10 @@
                         width: 100%;
                         height: auto;   
                     }
+                    @media (max-width: 810px){
+                        width: 90px;
+                        height: 90px;
+                    }
                 }
                 .block-entity-fieldnodefield-type-de-protagoniste{
                     background: $white;
@@ -78,7 +85,9 @@
                     grid-row: 4;
                     font-size: 2.5rem;
                     font-family: "Source Code Pro";
-                    
+                    @media (max-width: 810px){
+                        font-size: 1.2rem;
+                    }
                     a{
                         color: $black;
                     }
@@ -124,7 +133,9 @@
                 display: flex;
                 flex-direction: column;
                 width: 70%;  
-                
+                @media (max-width: 810px){
+                    margin: auto;
+                }
                 .title-contact{
                     background: $blue-light;
                     color: $white;