responsive

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;