smartphone offres de services

web/themes/custom/eql/css-compiled/styles.css

@@ -1775,6 +1775,9 @@ a {
           content: url("../images/pictos/noun_Arrow_3771902.svg"); }
     .offresdeservices .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockoffres-de--block-1 {
       grid-column: 2 / span 3; }
+      @media (max-width: 810px) {
+        .offresdeservices .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockoffres-de--block-1 {
+          grid-column: 2 / span 4; } }
       .offresdeservices .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockoffres-de--block-1 .view-display-id-block_1 {
         margin: auto; }
       .offresdeservices .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockoffres-de--block-1 .view-filters {
@@ -1795,7 +1798,7 @@ a {
             margin-right: 1rem; }
             .offresdeservices .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockoffres-de--block-1 .view-content .views-row .node-type-offre_de_service div:first-of-type {
               display: grid;
-              grid-template-columns: 1fr auto 1fr;
+              grid-template-columns: 1fr 1fr 1fr;
               grid-template-rows: repeat(6 auto); }
               .offresdeservices .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockoffres-de--block-1 .view-content .views-row .node-type-offre_de_service div:first-of-type .field--name-field-type-de-protagoniste {
                 grid-column: 1 / span 3;
@@ -1856,6 +1859,11 @@ a {
                 .offresdeservices .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockoffres-de--block-1 .view-content .views-row .node-type-offre_de_service div:first-of-type .field--name-field-date-de-proposition::after {
                   content: url("../images/pictos/noun_Arrow_3771902.svg");
                   align-self: flex-end; }
+        @media (max-width: 810px) {
+          .offresdeservices .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockoffres-de--block-1 .view-content {
+            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%; } }
 
 .page-node-type-offre-de-service {
   background: url("../images/pictos/carre-contour-bleu-offre.svg");

web/themes/custom/eql/scss/pages/_offresdeservices.scss

@@ -85,6 +85,9 @@
                         // offres
                         .block-views-blockoffres-de--block-1{
                             grid-column: 2 / span 3;
+                            @media (max-width: 810px){
+                                grid-column: 2 / span 4;
+                            }
                             .view-display-id-block_1{
                                 margin: auto;
                             }
@@ -116,7 +119,7 @@
                                         // height: 200px;
                                         div:first-of-type{
                                             display: grid;
-                                            grid-template-columns: 1fr auto 1fr;
+                                            grid-template-columns: 1fr 1fr 1fr;
                                             grid-template-rows: repeat(6 auto);
                                             .field--name-field-type-de-protagoniste{
                                                 grid-column: 1 / span 3;
@@ -203,7 +206,12 @@
                                         
                                     }
                                 }
-
+                                @media (max-width: 810px){
+                                    flex-direction: column;
+                                    .views-row{
+                                        width: 100%;
+                                    }
+                                }
                             }
                         }