Bläddra i källkod

responsive home

ouidade 2 år sedan
förälder
incheckning
e61aaaea04

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

@@ -187,7 +187,7 @@ a {
   .page-node-type-static .layout__region--third .block-region-third {
     margin: auto; } }
 
-@media (max-width: 300px) {
+@media (max-width: 479px) {
   #header-top #block-logogouv img {
     min-width: 60px;
     width: 70%;
@@ -498,7 +498,7 @@ a {
       @media (max-width: 479px) {
         .path-frontpage .block-region-content .block-views-blockactus-blocks-pages-block-1 .view-actus-blocks-pages .view-content {
           display: flex;
-          padding-left: 1rem;
+          flex-direction: column;
           width: 80%; } }
       .path-frontpage .block-region-content .block-views-blockactus-blocks-pages-block-1 .view-actus-blocks-pages .view-content .views-row:nth-of-type(1) {
         grid-column: 2; }
@@ -563,7 +563,11 @@ a {
     align-self: flex-end; }
     @media (max-width: 479px) {
       .path-frontpage .block-region-content .block-block-content3ee1f633-aaa7-4b4c-a42a-02206e26d3a2 {
-        grid-column: 3 / span 6; } }
+        grid-column: 2 / span 4;
+        max-width: 80%;
+        margin: auto;
+        margin-top: 1rem;
+        margin-bottom: 1.5rem; } }
     .path-frontpage .block-region-content .block-block-content3ee1f633-aaa7-4b4c-a42a-02206e26d3a2 .field--type-link {
       width: fit-content;
       height: fit-content;
@@ -593,6 +597,9 @@ a {
       .path-frontpage .block-region-content .block-views-blockhome-nodes-block-2 .view-display-id-block_2:is(.view-id-home_nodes) .node-type-static {
         width: 70%;
         margin: auto; }
+        @media (max-width: 479px) {
+          .path-frontpage .block-region-content .block-views-blockhome-nodes-block-2 .view-display-id-block_2:is(.view-id-home_nodes) .node-type-static {
+            width: 80%; } }
         .path-frontpage .block-region-content .block-views-blockhome-nodes-block-2 .view-display-id-block_2:is(.view-id-home_nodes) .node-type-static div:first-child:not(.field__item):not(.field) {
           display: flex;
           flex-direction: row;
@@ -626,6 +633,9 @@ a {
         .path-frontpage .block-region-content .block-views-blockhome-nodes-block-2 .view-display-id-block_2:is(.view-id-home_nodes) .node-type-static .field--name-field-accroche {
           flex: 1 1 50px;
           padding-left: 1rem; }
+          @media (max-width: 479px) {
+            .path-frontpage .block-region-content .block-views-blockhome-nodes-block-2 .view-display-id-block_2:is(.view-id-home_nodes) .node-type-static .field--name-field-accroche {
+              padding-left: 0em; } }
           .path-frontpage .block-region-content .block-views-blockhome-nodes-block-2 .view-display-id-block_2:is(.view-id-home_nodes) .node-type-static .field--name-field-accroche p {
             background-color: white;
             font-size: 1.5rem;
@@ -633,10 +643,17 @@ a {
             padding-bottom: 2rem;
             margin-block-start: 0;
             text-align: start !important; }
+            @media (max-width: 479px) {
+              .path-frontpage .block-region-content .block-views-blockhome-nodes-block-2 .view-display-id-block_2:is(.view-id-home_nodes) .node-type-static .field--name-field-accroche p {
+                font-size: 1.2rem;
+                width: 100%; } }
         .path-frontpage .block-region-content .block-views-blockhome-nodes-block-2 .view-display-id-block_2:is(.view-id-home_nodes) .node-type-static .field--name-field-videos {
           flex: 0 0 80%;
           padding-top: 4rem;
           margin: auto; }
+          @media (max-width: 479px) {
+            .path-frontpage .block-region-content .block-views-blockhome-nodes-block-2 .view-display-id-block_2:is(.view-id-home_nodes) .node-type-static .field--name-field-videos {
+              flex: 0 0 100%; } }
           .path-frontpage .block-region-content .block-views-blockhome-nodes-block-2 .view-display-id-block_2:is(.view-id-home_nodes) .node-type-static .field--name-field-videos .field__items .field__item:nth-of-type(1) {
             display: none; }
 

+ 1 - 1
web/themes/custom/eql/scss/global/_mediaqueries.scss

@@ -87,7 +87,7 @@
 }
 
 
-@media  (max-width: 300px){ 
+@media (max-width: 479px){ 
     #header-top{
         #block-logogouv{
             img{

+ 23 - 2
web/themes/custom/eql/scss/pages/_home.scss

@@ -161,7 +161,8 @@
                     padding-bottom: 4rem;
                     @media (max-width: 479px){ 
                         display: flex;
-                        padding-left: 1rem;
+                        flex-direction: column;
+                        // padding-left: 1rem;
                         width: 80%;
                     }
                     .views-row:nth-of-type(1) { grid-column: 2; }
@@ -253,7 +254,11 @@
             margin-bottom: 2rem; 
             align-self: flex-end; 
             @media (max-width: 479px){ 
-                grid-column: 3 / span 6; 
+                grid-column: 2 / span 4; 
+                max-width: 80%;
+                margin: auto;
+                margin-top: 1rem;
+                margin-bottom: 1.5rem;
             }
                          
             .field--type-link {
@@ -299,6 +304,9 @@
                 .node-type-static{
                     width: 70%;
                     margin: auto;
+                    @media (max-width: 479px) {
+                        width: 80%;
+                    }
                     div:first-child:not(.field__item):not(.field){
                     display: flex;
                     flex-direction: row;
@@ -319,6 +327,7 @@
                         list-style: none;
 
 
+
                         a{
                             text-transform: uppercase;
                             font-weight: 700;
@@ -347,6 +356,10 @@
                         flex: 1 1 50px;
                         // grid-column: 4 / 9;
                         padding-left: 1rem;
+                        @media (max-width: 479px){ 
+                           padding-left: 0em;
+                           
+                        }
                         p{
                             background-color: $white;
                             font-size: 1.5rem;
@@ -354,6 +367,10 @@
                             padding-bottom: 2rem;
                             margin-block-start: 0;
                             text-align: start !important;
+                            @media (max-width: 479px){ 
+                                font-size: 1.2rem;
+                                width: 100%;
+                            }
                         }
 
                     }
@@ -361,6 +378,10 @@
                         flex: 0 0 80%;
                         padding-top: 4rem;
                         margin: auto;
+                        @media (max-width: 479px){
+                            flex: 0 0 100%;
+                        }
+
                         .field__items {
                             .field__item:nth-of-type(1){
                                 display: none;