Browse Source

responsive actu

ouidade 3 years ago
parent
commit
f70be96381

+ 8 - 2
web/themes/custom/eql/css-compiled/styles.css

@@ -756,13 +756,19 @@ a {
       margin-top: 1rem;
       font-weight: 800; }
     .path-node.page-node-type-actualite .layout--threecol-25-50-25 .layout__region--top .block-region-top .block-entity-fieldnodefield-images {
-      grid-column-start: 5;
-      grid-column-end: 9; }
+      grid-column: 5 / span 9; }
       .path-node.page-node-type-actualite .layout--threecol-25-50-25 .layout__region--top .block-region-top .block-entity-fieldnodefield-images img {
         padding-top: 2rem;
         width: 600px;
         max-height: 360px;
         object-fit: cover; }
+      @media (max-width: 1008px) {
+        .path-node.page-node-type-actualite .layout--threecol-25-50-25 .layout__region--top .block-region-top .block-entity-fieldnodefield-images {
+          width: 100%; }
+          .path-node.page-node-type-actualite .layout--threecol-25-50-25 .layout__region--top .block-region-top .block-entity-fieldnodefield-images img {
+            padding-top: 2rem;
+            width: 100%;
+            object-fit: contain; } }
     @media (max-width: 810px) {
       .path-node.page-node-type-actualite .layout--threecol-25-50-25 .layout__region--top .block-region-top {
         display: flex;

+ 11 - 3
web/themes/custom/eql/scss/pages/_actualite.scss

@@ -93,8 +93,9 @@
                 }
 
                 .block-entity-fieldnodefield-images{
-                    grid-column-start: 5;
-                    grid-column-end: 9;
+                    // grid-column-start: 5;
+                    // grid-column-end: 9;
+                    grid-column: 5 / span 9;
                     img{
                         padding-top: 2rem;
                         width: 600px;
@@ -105,7 +106,14 @@
                     
                     // position: relative;
                     // bottom: -50%;
-                    
+                    @media (max-width: 1008px){
+                        width: 100%;
+                        img{
+                            padding-top: 2rem;
+                            width: 100%;
+                            object-fit: contain;
+                        }
+                    }
                 }
                 @media (max-width: 810px){
                     display: flex;