Browse Source

slide home max height

ouidade 10 tháng trước cách đây
mục cha
commit
cf0f65db4a

+ 10 - 3
web/themes/custom/eql/css-compiled/styles.css

@@ -444,6 +444,9 @@ a {
       height: 100%; }
       .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content {
         height: 90%; }
+        @media (max-width: 810px) {
+          .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .slick-list {
+            height: fit-content !important; } }
         @media (max-width: 479px) {
           .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .slick-list {
             height: fit-content !important; } }
@@ -453,13 +456,13 @@ a {
           width: 80%;
           height: 600px;
           margin: auto; }
-          @media (max-width: 680px) {
+          @media (max-width: 810px) {
             .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite {
               width: 65%; } }
           .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child {
             display: grid;
             grid-template-columns: 1fr repeat(9, 1fr) 1fr; }
-            @media (max-width: 680px) {
+            @media (max-width: 810px) {
               .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child {
                 display: flex;
                 flex-direction: column;
@@ -475,7 +478,11 @@ a {
                 padding-left: 1rem; }
                 @media (max-width: 852px) {
                   .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field--name-field-images .field__item img {
-                    max-height: 500px; } }
+                    max-height: 310px;
+                    max-width: 100%;
+                    object-fit: contain;
+                    padding-left: 0;
+                    margin-bottom: 1rem; } }
                 @media (max-width: 792px) {
                   .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field--name-field-images .field__item img {
                     max-height: 450px; } }

+ 19 - 15
web/themes/custom/eql/scss/pages/_home.scss

@@ -9,6 +9,10 @@
             height: 600px;
             border-bottom: 5px solid $blue-light;
             background: $background-actus;
+
+            // @media(max-width: 810px){
+            //     max-height: fit-content;
+            // }
             @media(max-width:792px){
                 max-height: 500px;
             }
@@ -26,6 +30,9 @@
                     .view-content{
                         height: 90%;
                         .slick-list{
+                            @media(max-width: 810px){
+                                height: fit-content !important;
+                                } 
                             @media(max-width: 479px){
                             height: fit-content !important;
                             }   
@@ -37,13 +44,17 @@
                                 width: 80%;
                                 height: 600px;
                                 margin: auto;
-                                @media (max-width: 680px){
+                                @media (max-width: 810px){ 
+
+                                // @media (max-width: 680px){
                                     width: 65%;
                                 }
                                 div:first-child{           // block actu dans le bandeau
                                     display: grid;
                                     grid-template-columns: 1fr repeat(9, 1fr) 1fr;
-                                    @media (max-width: 680px){ 
+                                    @media (max-width: 810px){ 
+
+                                    // @media (max-width: 680px){ 
                                         display: flex;
                                         flex-direction: column;
                                         height: fit-content;
@@ -60,7 +71,11 @@
                                             object-fit: cover;
                                             padding-left: 1rem;
                                             @media(max-width:852px){
-                                                max-height: 500px;
+                                                max-height: 310px;
+                                                max-width: 100%;
+                                                object-fit: contain;
+                                                padding-left: 0;
+                                                margin-bottom: 1rem;
                                             }
                                             @media(max-width:792px){
                                                 max-height: 450px;
@@ -84,13 +99,6 @@
                                         grid-column: 9 / span 9;
                                         grid-row: 2;
                                         order: 2;
-                                        // display: flex !important;
-                                        // flex-direction: row;
-                                        // justify-content: flex-start;
-                                        // &:not(:last-child):after{ 
-                                        //     padding-right: 1rem;
-                                        //     content: "|";
-                                        // }
                                         div{
                                             display: flex !important;
                                             flex-direction: row;
@@ -101,11 +109,7 @@
                                             font-size: 0.9rem;
                                             font-weight: 800;
                                             padding-right: 1rem;
-                                            width: fit-content;
-                                            // :not(:last-child):after{ 
-                                            //     padding-left: 0.5rem;
-                                            //     content: "|";
-                                            // }            
+                                            width: fit-content;            
                                         }
                                     }