responsive

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

@@ -5,7 +5,7 @@ header{
     max-height: inherit;
     border-bottom: 1px solid black;
     padding-left: 40px;
-    @media screen and (max-width: 300px) {
+    @media screen and (max-width: 550px) {
       padding-left: 20px;
       flex-wrap: nowrap;
     }
@@ -43,6 +43,9 @@ header{
     }
     #block-colloque2024-logoepau{
       margin-right: 2rem;
+      @media screen and (max-width: 550px) {
+        margin: 0;
+      }
     }
     #block-renderedsitesettingsblock-2{
       width: 25%;
@@ -52,6 +55,9 @@ header{
       @media screen and (max-width: 300px) {
         display: none;
       }
+      @media screen and (max-width: 550px) {
+        align-content: center;
+      }
       a{
         display: flex;
         margin: auto;
@@ -73,6 +79,9 @@ header{
           text-align: left;
           margin: auto 0;
           line-height: 0.95;
+          @media screen and (max-width: 550px) {
+            font-size: 1rem;
+          }
         }
         .__info_colloque{
           width: fit-content;
@@ -80,6 +89,9 @@ header{
           height: auto;
           display: flex;
           flex-direction: row;
+          @media screen and (max-width: 550px) {
+            flex-direction: column;
+          }
           &>div{
             height: auto;
             &:first-child{
@@ -89,6 +101,10 @@ header{
               font-family: "Mariannebold";
               text-transform: uppercase;
               padding-left: 0.5rem;
+              @media screen and (max-width: 550px) {
+                padding-left: 0;
+                font-size: 0.6rem;
+              }
             }
             &:last-child{
               order: 1;
@@ -96,6 +112,9 @@ header{
                 width: min-content;
                 margin-bottom: 0;
                 text-transform: uppercase;
+                @media screen and (max-width: 550px) {
+                  font-size: 0.6rem;
+                }
 
             }
           }