diff --git a/CHANGELOG.md b/CHANGELOG.md index 105ff7e91c3567ebe3769d48e3916a5da11f02bc..83e04058f51010eb4e34c50474d87fbb95163a15 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,6 +8,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Fix expansion of accordion items when an accordion item is rendered multiple items in the same page - Fix Agenda Box to be working with Mathjax library +- Fix half-height sections in mobile devices appearing half instead of full and hiding content ## [2.7.3] - 06/08/2020 diff --git a/patterns/molecules/header-block/css/header-component.css b/patterns/molecules/header-block/css/header-component.css index 097f518e122bc0812de3d195ed4873f087491e4a..2ad3bddaaf2ee80cd8d028e1fdb456141ac43c9a 100644 --- a/patterns/molecules/header-block/css/header-component.css +++ b/patterns/molecules/header-block/css/header-component.css @@ -108,7 +108,7 @@ text-shadow: 1px 0px 1px black, 0px 1px 1px black, -1px 0px 1px black, 0px -1px 1px black, 0 0 1px black; } @media only screen and (max-width: 991px) and (min-width: 768px) { .cern-component-header-blocks .component-header__carousel .header-block__title { - margin: 180px auto 0; } } + margin: 8rem auto 0; } } .cern-component-header-blocks .component-header__carousel .header-block__title h3.header-block__name { font-family: opensans-bold; font-weight: 500; @@ -274,8 +274,7 @@ body.has-header.cern-toolbar .is_half_height .cern-component-header-blocks.compo body.has-header.cern-toolbar.toolbar-vertical .is_full_height .cern-component-header-blocks.component-header .header-block__title { height: 60vh; } body.has-header.cern-toolbar.toolbar-vertical .is_half_height .cern-component-header-blocks.component-header { - height: calc((100vh - 79px) / 2); - min-height: calc((100vh - 79px) / 2); } + height: calc(100vh - 79px); } body.has-header.cern-toolbar.toolbar-vertical .is_half_height .cern-component-header-blocks.component-header .header-block__title { height: 25vh; } } body.has-header.cern-toolbar.toolbar-fixed .is_full_height .cern-component-header-blocks.component-header { @@ -294,6 +293,10 @@ body.has-header.cern-toolbar.toolbar-fixed.toolbar-vertical .is_full_height .cer body.has-header.cern-toolbar.toolbar-fixed.toolbar-vertical .is_half_height .cern-component-header-blocks.component-header { height: calc((100vh - 79px) / 2); min-height: calc((100vh - 79px) / 2); } + @media only screen and (max-width: 767px) { + body.has-header.cern-toolbar.toolbar-fixed.toolbar-vertical .is_half_height .cern-component-header-blocks.component-header { + height: calc(100vh - 79px); + min-height: calc(100vh - 79px); } } body.has-header.cern-toolbar.toolbar-fixed.toolbar-vertical .is_half_height .cern-component-header-blocks.component-header .header-block__title { height: 25vh; } body.has-header.cern-toolbar:not(.toolbar-vertical).toolbar-tray-open .is_full_height .cern-component-header-blocks.component-header { @@ -386,7 +389,7 @@ body:not(.has-header) .is_half_height .cern-component-header-blocks.component-he .cern-component-header-blocks .component-header__scroll { display: none; } } .header-block { - color: transparent;} + color: transparent; } .header-block .header-block__title { color: white; } diff --git a/patterns/molecules/header-block/sass/header-component.scss b/patterns/molecules/header-block/sass/header-component.scss index e63dfec6ba973d5ebd60ad0ee0146724e7bf20bb..905ebbb794e4075f7207c69b8bcdffdf605190be 100644 --- a/patterns/molecules/header-block/sass/header-component.scss +++ b/patterns/molecules/header-block/sass/header-component.scss @@ -143,7 +143,7 @@ text-shadow: 1px 0px 1px black, 0px 1px 1px black, -1px 0px 1px black, 0px -1px 1px black, 0 0 1px black; @media only screen and (max-width: 991px) and (min-width: 768px) { - margin: 180px auto 0; + margin: 8rem auto 0; } h3.header-block__name { @@ -510,8 +510,7 @@ body { .cern-component-header-blocks { &.component-header { //height: calc(50vh - 79px); - height: calc((100vh - 79px) / 2); - min-height: calc((100vh - 79px) / 2); + height: calc(100vh - 79px); .header-block__title{ height: 25vh; @@ -580,6 +579,12 @@ body { height: calc((100vh - 79px) / 2); min-height: calc((100vh - 79px) / 2); + @media only screen and (max-width: 767px) { + height: calc(100vh - 79px); + min-height: calc(100vh - 79px); + } + + .header-block__title{ height: 25vh; } diff --git a/patterns/molecules/row/css/row.component.css b/patterns/molecules/row/css/row.component.css index 5d6c21ed4718ae00ad36db5e445259b295687618..b3ecca7ea9ab46f1c18eab0990e67c5a2c607e70 100644 --- a/patterns/molecules/row/css/row.component.css +++ b/patterns/molecules/row/css/row.component.css @@ -341,8 +341,8 @@ body:not(.has-header).cern-toolbar:not(.toolbar-vertical).toolbar-tray-open .fie font-size: calc(100vh / 20); } body.has-header.cern-toolbar.toolbar-fixed.toolbar-vertical .field--items > .field--item:first-child .component-row.is_half_height { - min-height: calc((100vh - 79px) / 2); - height: calc((100vh - 79px) / 2); } + min-height: calc(100vh - 79px); + height: calc(100vh - 79px); } .component-row.effect_background_rotation .background__image { right: -50% !important; diff --git a/patterns/molecules/row/scss/row.component.scss b/patterns/molecules/row/scss/row.component.scss index 44599830b7a3813b3f7254a6068f500b82beabea..2fe5bbb313992b0be7a258f1c2c11336fe378ff4 100644 --- a/patterns/molecules/row/scss/row.component.scss +++ b/patterns/molecules/row/scss/row.component.scss @@ -790,8 +790,8 @@ body:not(.has-header) { // tool bars: 79px .field--items > .field--item:first-child { .component-row.is_half_height { - min-height: calc((100vh - 79px) / 2); - height: calc((100vh - 79px) / 2); + min-height: calc(100vh - 79px); + height: calc(100vh - 79px); } } }