responsive

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

@@ -1001,7 +1001,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) {
       header .row {
         padding-left: 20px;
         flex-wrap: nowrap; } }
@@ -1032,6 +1032,9 @@ header {
         z-index: 10000; }
     header .row #block-colloque2024-logoepau {
       margin-right: 2rem; }
+      @media screen and (max-width: 550px) {
+        header .row #block-colloque2024-logoepau {
+          margin: 0; } }
     header .row #block-renderedsitesettingsblock-2 {
       width: 25%;
       border-left: 1px solid black;
@@ -1040,6 +1043,9 @@ header {
       @media screen and (max-width: 300px) {
         header .row #block-renderedsitesettingsblock-2 {
           display: none; } }
+      @media screen and (max-width: 550px) {
+        header .row #block-renderedsitesettingsblock-2 {
+          align-content: center; } }
       header .row #block-renderedsitesettingsblock-2 a {
         display: flex;
         margin: auto;
@@ -1059,12 +1065,18 @@ header {
           text-align: left;
           margin: auto 0;
           line-height: 0.95; }
+          @media screen and (max-width: 550px) {
+            header .row #block-renderedsitesettingsblock-2 .site_setting_entity h1 {
+              font-size: 1rem; } }
         header .row #block-renderedsitesettingsblock-2 .site_setting_entity .__info_colloque {
           width: fit-content;
           order: 1;
           height: auto;
           display: flex;
           flex-direction: row; }
+          @media screen and (max-width: 550px) {
+            header .row #block-renderedsitesettingsblock-2 .site_setting_entity .__info_colloque {
+              flex-direction: column; } }
           header .row #block-renderedsitesettingsblock-2 .site_setting_entity .__info_colloque > div {
             height: auto; }
             header .row #block-renderedsitesettingsblock-2 .site_setting_entity .__info_colloque > div:first-child {
@@ -1074,12 +1086,19 @@ header {
               font-family: "Mariannebold";
               text-transform: uppercase;
               padding-left: 0.5rem; }
+              @media screen and (max-width: 550px) {
+                header .row #block-renderedsitesettingsblock-2 .site_setting_entity .__info_colloque > div:first-child {
+                  padding-left: 0;
+                  font-size: 0.6rem; } }
             header .row #block-renderedsitesettingsblock-2 .site_setting_entity .__info_colloque > div:last-child {
               order: 1;
               color: black;
               width: min-content;
               margin-bottom: 0;
               text-transform: uppercase; }
+              @media screen and (max-width: 550px) {
+                header .row #block-renderedsitesettingsblock-2 .site_setting_entity .__info_colloque > div:last-child {
+                  font-size: 0.6rem; } }
     header .row #block-colloque2024-mainnavigation {
       width: max-content; }
       header .row #block-colloque2024-mainnavigation .burger {

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;
+                }
 
             }
           }