responsive

web/themes/custom/colloque2024/css-compiled/components/footer/footer.css

@@ -13,11 +13,17 @@ footer {
     padding-right: 2rem !important; }
   footer > .d-flex > div:not(:last-of-type) {
     border-right: 1px solid black; }
+    @media screen and (min-width: 300px) {
+      footer > .d-flex > div:not(:last-of-type) {
+        border-right: none; } }
   @media (min-width: 992px) {
     footer .d-lg-block {
       display: block !important; } }
   footer #block-renderedsitesettingsblock-5 {
     max-width: 30%; }
+    @media screen and (max-width: 300px) {
+      footer #block-renderedsitesettingsblock-5 {
+        max-width: 100%; } }
     footer #block-renderedsitesettingsblock-5 div.site_setting_entity div.grid {
       display: grid;
       grid-template-columns: 1fr 1fr; }
@@ -33,6 +39,10 @@ footer {
       footer #block-renderedsitesettingsblock-5 div.site_setting_entity div.grid div:nth-of-type(4) {
         grid-column: 2;
         grid-row: 3; }
+      @media screen and (max-width: 300px) {
+        footer #block-renderedsitesettingsblock-5 div.site_setting_entity div.grid {
+          display: flex;
+          flex-direction: column; } }
   @media (min-width: 992px) {
     footer #block-renderedsitesettingsblock-4 .d-lg-block {
       display: block !important; } }

web/themes/custom/colloque2024/css-compiled/index.css

@@ -516,6 +516,9 @@ body #content-ontop {
   position: relative;
   top: -1400px;
   padding-top: 5rem; }
+  @media screen and (max-width: 300px) {
+    body #content-ontop {
+      padding-top: 2rem; } }
 
 body #background-animated {
   width: 100VW;
@@ -685,27 +688,47 @@ header #block-colloque2024-mainnavigation ul li {
     display: grid;
     grid-template-columns: repeat(7, 1fr);
     margin: auto; }
+    @media screen and (max-width: 300px) {
+      #block-colloque2024-renderedsitesettingsblock-6 .site_setting_entity {
+        display: flex;
+        flex-direction: column; } }
     #block-colloque2024-renderedsitesettingsblock-6 .site_setting_entity div:nth-of-type(1) {
       font-size: 8rem;
       font-family: 'Mariannebold';
       line-height: 95%;
       grid-column: 1 / span 4;
       grid-row: 2; }
+      @media screen and (max-width: 300px) {
+        #block-colloque2024-renderedsitesettingsblock-6 .site_setting_entity div:nth-of-type(1) {
+          font-size: 4.5rem;
+          order: 3; } }
     #block-colloque2024-renderedsitesettingsblock-6 .site_setting_entity div:nth-of-type(2) {
       grid-column: 1 / 4;
       grid-row: 3;
       font-size: 2.5rem; }
+      @media screen and (max-width: 300px) {
+        #block-colloque2024-renderedsitesettingsblock-6 .site_setting_entity div:nth-of-type(2) {
+          font-size: 1.5rem;
+          order: 4; } }
     #block-colloque2024-renderedsitesettingsblock-6 .site_setting_entity div:nth-of-type(3) {
       text-transform: uppercase;
       font-family: 'Mariannebold';
       font-size: 3.5rem;
       grid-column: 5 / span 7;
       grid-row: 3; }
+      @media screen and (max-width: 300px) {
+        #block-colloque2024-renderedsitesettingsblock-6 .site_setting_entity div:nth-of-type(3) {
+          font-size: 1.5rem;
+          order: 2; } }
     #block-colloque2024-renderedsitesettingsblock-6 .site_setting_entity div:nth-of-type(4) {
       text-transform: uppercase;
       grid-column: 5 / span 7;
       grid-row: 1;
       font-size: 2rem; }
+      @media screen and (max-width: 300px) {
+        #block-colloque2024-renderedsitesettingsblock-6 .site_setting_entity div:nth-of-type(4) {
+          font-size: 1.5rem;
+          order: 1; } }
 
 #txt_present .medias {
   display: none; }
@@ -972,9 +995,11 @@ header {
   header .row {
     background: white;
     max-height: inherit;
-    justify-content: space-between;
     border-bottom: 1px solid black;
     padding-left: 40px; }
+    @media screen and (max-width: 300px) {
+      header .row {
+        padding-left: 20px; } }
     header .row #block-colloque2024-logorepublique, header .row #block-colloque2024-logoepau {
       max-height: inherit; }
       header .row #block-colloque2024-logorepublique > div, header .row #block-colloque2024-logoepau > div {
@@ -987,9 +1012,10 @@ header {
             height: 125px;
             padding-bottom: 0.5rem;
             padding-top: 0.5rem; }
-            @media screen and (min-width: 450px) {
+            @media screen and (max-width: 300px) {
               header .row #block-colloque2024-logorepublique > div a img, header .row #block-colloque2024-logoepau > div a img {
-                width: auto; } }
+                width: 100px;
+                object-fit: contain; } }
       header .row #block-colloque2024-logorepublique.is-active, header .row #block-colloque2024-logoepau.is-active {
         z-index: 10000; }
     header .row #block-colloque2024-logoepau {
@@ -999,11 +1025,14 @@ header {
       border-left: 1px solid black;
       padding: 0;
       justify-content: end; }
+      @media screen and (max-width: 300px) {
+        header .row #block-renderedsitesettingsblock-2 {
+          display: none; } }
       header .row #block-renderedsitesettingsblock-2 a {
         display: flex;
         margin: auto;
-        margin-left: 20%; }
-      @media screen and (min-width: 1200px) {
+        margin-left: 1rem; }
+      @media screen and (max-width: 1200px) {
         header .row #block-renderedsitesettingsblock-2 {
           display: flex; } }
       header .row #block-renderedsitesettingsblock-2 .site_setting_entity {
@@ -1014,7 +1043,7 @@ header {
           width: 60%;
           color: black;
           padding-right: 1rem;
-          font-size: 2.2rem;
+          font-size: 2rem;
           text-align: left;
           margin: auto 0;
           line-height: 0.95; }
@@ -2035,11 +2064,17 @@ footer {
     padding-right: 2rem !important; }
   footer > .d-flex > div:not(:last-of-type) {
     border-right: 1px solid black; }
+    @media screen and (min-width: 300px) {
+      footer > .d-flex > div:not(:last-of-type) {
+        border-right: none; } }
   @media (min-width: 992px) {
     footer .d-lg-block {
       display: block !important; } }
   footer #block-renderedsitesettingsblock-5 {
     max-width: 30%; }
+    @media screen and (max-width: 300px) {
+      footer #block-renderedsitesettingsblock-5 {
+        max-width: 100%; } }
     footer #block-renderedsitesettingsblock-5 div.site_setting_entity div.grid {
       display: grid;
       grid-template-columns: 1fr 1fr; }
@@ -2055,6 +2090,10 @@ footer {
       footer #block-renderedsitesettingsblock-5 div.site_setting_entity div.grid div:nth-of-type(4) {
         grid-column: 2;
         grid-row: 3; }
+      @media screen and (max-width: 300px) {
+        footer #block-renderedsitesettingsblock-5 div.site_setting_entity div.grid {
+          display: flex;
+          flex-direction: column; } }
   @media (min-width: 992px) {
     footer #block-renderedsitesettingsblock-4 .d-lg-block {
       display: block !important; } }

web/themes/custom/colloque2024/css-compiled/pages/layout.css

@@ -10,6 +10,9 @@ body #content-ontop {
   position: relative;
   top: -1400px;
   padding-top: 5rem; }
+  @media screen and (max-width: 300px) {
+    body #content-ontop {
+      padding-top: 2rem; } }
 
 body #background-animated {
   width: 100VW;

web/themes/custom/colloque2024/css/components/footer/footer.scss

@@ -16,11 +16,12 @@ footer{
       padding-top: 2rem;
       padding-left: 2rem !important;
       padding-right: 2rem !important;
-      
     }
     & > div:not(:last-of-type){
       border-right: 1px solid black;
-
+      @media screen and (min-width: 300px) {
+        border-right: none;
+       }
     }
   }
   @media (min-width: 992px) {
@@ -30,6 +31,9 @@ footer{
   }
   #block-renderedsitesettingsblock-5{
     max-width: 30%;
+    @media screen and (max-width: 300px) {
+      max-width: 100%;
+    }
 
     div.site_setting_entity div.grid{
       display: grid;
@@ -50,6 +54,10 @@ footer{
         grid-column: 2;
         grid-row: 3;
       }
+      @media screen and (max-width: 300px) {
+        display: flex;
+        flex-direction: column;   
+        }
     }
 
 

web/themes/custom/colloque2024/css/components/header/header.scss

@@ -3,11 +3,15 @@ header{
   .row{
     background: white;
     max-height: inherit;
-    justify-content: space-between;
     border-bottom: 1px solid black;
     padding-left: 40px;
+    @media screen and (max-width: 300px) {
+      padding-left: 20px;
+
+    }
     #block-colloque2024-logorepublique, #block-colloque2024-logoepau{
       max-height: inherit;
+      
       & > div{
         max-height: inherit;
         a{
@@ -16,13 +20,11 @@ header{
           img{
             width: auto;
             height: 125px;
-            // width: 100%;
-            // max-height: inherit;
-            // object-fit: contain;
             padding-bottom: 0.5rem;
             padding-top: 0.5rem;
-            @media screen and (min-width: 450px) {
-              width: auto;
+            @media screen and (max-width: 300px) {
+              width: 100px;
+              object-fit: contain;
             }
           }
         }
@@ -38,61 +40,51 @@ header{
       width: 25%;
       border-left: 1px solid black;
       padding: 0;
-      // display: none;
       justify-content: end;
+      @media screen and (max-width: 300px) {
+        display: none;
+      }
       a{
         display: flex;
         margin: auto;
-        // align-items: right;
-        margin-left: 20%;
+        margin-left: 1rem;
       }
-      @media screen and (min-width: 1200px) {
+      @media screen and (max-width: 1200px) {
         display: flex;
         
       }
       .site_setting_entity{
         display: flex;
         flex-direction: column;
-        // align-items: left;
-        // justify-content: flex-end;
-        // padding: 0 1rem 0 0rem;
         h1{
           order: 2;
           width: 60%;
           color: black;
           padding-right: 1rem;
-          font-size: 2.2rem;
-          // text-transform: uppercase;
+          font-size: 2rem;
           text-align: left;
-          // align-self: stretch;
           margin: auto 0;
           line-height: 0.95;
         }
         .__info_colloque{
-          // width: 50%;
           width: fit-content;
           order: 1;
           height: auto;
           display: flex;
           flex-direction: row;
-          // justify-content: space-between;
           &>div{
             height: auto;
             &:first-child{
               order: 2;
               color: black;
               white-space: nowrap;
-              // border-bottom: 2px solid $color1;
               font-family: "Mariannebold";
               text-transform: uppercase;
               padding-left: 0.5rem;
-              // padding-bottom: 0.4rem;
-              // margin-bottom: 0.6rem;
             }
             &:last-child{
               order: 1;
                 color: black;
-                // padding-right: 10px;
                 width: min-content;
                 margin-bottom: 0;
                 text-transform: uppercase;

web/themes/custom/colloque2024/css/pages/front.scss

@@ -206,17 +206,29 @@ header {
     grid-template-columns: repeat(7, 1fr);
     margin: auto;
     // width: 90%;
+    @media screen and (max-width: 300px) {
+      display: flex;
+      flex-direction: column;
+    }
     div:nth-of-type(1){
       font-size: 8rem;
       font-family: 'Mariannebold';
       line-height: 95%;
       grid-column: 1 / span 4;
       grid-row: 2;
+      @media screen and (max-width: 300px) {
+       font-size: 4.5rem;
+       order: 3;
+      }
     }
     div:nth-of-type(2){
       grid-column: 1 / 4;
       grid-row: 3;
       font-size: 2.5rem;
+      @media screen and (max-width: 300px) {
+        font-size: 1.5rem;
+        order: 4;
+       }
     }
     div:nth-of-type(3){
       text-transform: uppercase;
@@ -224,12 +236,21 @@ header {
       font-size: 3.5rem;
       grid-column: 5 / span 7;
       grid-row: 3;
+      @media screen and (max-width: 300px) {
+        font-size: 1.5rem;
+        order: 2
+        ;
+       }
     }
     div:nth-of-type(4){
       text-transform: uppercase;
       grid-column: 5 / span 7;
       grid-row: 1;
       font-size: 2rem;
+      @media screen and (max-width: 300px) {
+        font-size: 1.5rem;
+        order: 1;
+       }
     }
   }
 }

web/themes/custom/colloque2024/css/pages/layout.scss

@@ -13,6 +13,9 @@ body {
  position: relative;
  top: -1400px;
  padding-top: 5rem;
+ @media screen and (max-width: 300px) {
+  padding-top: 2rem;
+ }
  }
  #background-animated{
   width: 100VW;