Fix half-height sections in mobile devices appearing half instead of full and hiding content

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
 

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

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

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;

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