Bläddra i källkod

responsive actu

ouidade 1 månad sedan
förälder
incheckning
4a98e978fd

+ 9 - 7
web/themes/custom/eql/dist/assets/css/bundle.css

@@ -1232,12 +1232,12 @@ a {
     max-width: 90vw;
   }
 }
-@media (max-width: 568px) {
+@media (max-width: 900px) {
   .path-node.page-node-type-actualite .layout--threecol-25-50-25 .layout__region--top .block-region-top .block-entity-fieldnodefield-images {
-    grid-column: 1/span 8;
+    grid-column: 3/span 5;
   }
 }
-@media (max-width: 499px) {
+@media (max-width: 568px) {
   .path-node.page-node-type-actualite .layout--threecol-25-50-25 .layout__region--top .block-region-top .block-entity-fieldnodefield-images {
     grid-column: 1/span 8;
   }
@@ -1297,17 +1297,18 @@ a {
 .path-node.page-node-type-actualite .layout--threecol-25-50-25 .layout__region--second {
   flex: 0 1 50%;
 }
-@media (max-width: 568px) {
+@media (max-width: 900px) {
   .path-node.page-node-type-actualite .layout--threecol-25-50-25 .layout__region--second {
-    width: 80%;
+    width: 100vw;
   }
 }
 .path-node.page-node-type-actualite .layout--threecol-25-50-25 .layout__region--second .block-region-second {
   width: 90%;
 }
-@media (max-width: 810px) {
+@media (max-width: 900px) {
   .path-node.page-node-type-actualite .layout--threecol-25-50-25 .layout__region--second .block-region-second {
-    width: 100%;
+    width: 90%;
+    margin: auto;
   }
 }
 .path-node.page-node-type-actualite .layout--threecol-25-50-25 .layout__region--second .block-region-second .block-entity-fieldnodebody p {
@@ -1372,6 +1373,7 @@ a {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
+  flex-wrap: wrap;
 }
 @media (max-width: 568px) {
   .path-node.page-node-type-actualite .layout--threecol-25-50-25 .layout__region--second .block-region-second .block-entity-fieldnodefield-partenaires .field__items {

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

@@ -116,13 +116,14 @@
                         }
                         
                     }
+                    @media (max-width: 900px){
+                        grid-column: 3 /span 5;
+                    }
 
                     @media (max-width: 568px){
                         grid-column: 1 /span 8;
                     }
-                    @media (max-width: 499px){
-                        grid-column: 1 /span 8;
-                    }
+                    
                     blockquote{
                         font-size: 0.8rem;
                         text-align: center;
@@ -186,13 +187,15 @@
         }
         .layout__region--second{ 
             flex: 0 1 50%;
-            @media (max-width: 568px){
-                width: 80%;
+            @media (max-width: 900px){
+                width: 100vw;
+
             }
             .block-region-second{
                 width: 90%;
-                @media (max-width:810px) {
-                    width: 100%;
+                @media (max-width:900px) {
+                    width: 90%;
+                    margin: auto;
                     
                 }
                 .block-entity-fieldnodebody{
@@ -270,6 +273,7 @@
                         display: flex;
                         flex-direction: row;
                         justify-content: space-between;
+                        flex-wrap: wrap;
                         @media (max-width: 568px){
                             flex-direction: column;
                         }