diff --git a/web/themes/custom/colloque2024/css-compiled/index.css b/web/themes/custom/colloque2024/css-compiled/index.css index 17620a56..7d2ddd75 100644 --- a/web/themes/custom/colloque2024/css-compiled/index.css +++ b/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 { diff --git a/web/themes/custom/colloque2024/css/components/header/header.scss b/web/themes/custom/colloque2024/css/components/header/header.scss index 70b7aa70..88b086e9 100644 --- a/web/themes/custom/colloque2024/css/components/header/header.scss +++ b/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; + } } }