Adjust the height of the header based on the height of the page, instead of on its width.

_sass/base/_common.scss

@@ -18,8 +18,11 @@ body {
     font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
     color: $textColor;
 
-    @media (min-width: $bp-sm) {
+    @media (min-height: $bp-md-v) {
         padding-top: $headerHeight;
+    }
+
+    @media (min-width: $bp-sm) {
         margin-bottom: $footerHeight;
     }
 }

_sass/base/_constants.scss

@@ -15,6 +15,13 @@ $bp-md: 768px;
 $bp-lg: 992px;
 $bp-xl: 1200px;
 
+// Vertical breakpoints, I made these up...
+$bp-xs-v: 0;
+$bp-sm-v: 200px;
+$bp-md-v: 500px;
+$bp-lg-v: 768px;
+$bp-xl-v: 1024px;
+
 // Brand Colors
 $mainBrandColor: #466BB0;
 $secondBrandColor: #286AC7;

_sass/modules/_header.scss

@@ -5,7 +5,7 @@ header {
         padding-top: .2em;
         padding-bottom: .2em;
 
-        @media (min-width: $bp-sm) {
+        @media (min-height: $bp-md-v) {
             padding-top: .5em;
             padding-bottom: .5em;
         }
@@ -14,7 +14,7 @@ header {
             width: .8em;
             height: 1.2em;
 
-            @media (min-width: $bp-sm) {
+            @media (min-height: $bp-md-v) {
                 width: 2em;
                 height: 3em;
             }
@@ -28,7 +28,7 @@ header {
             line-height: 1.1em;
             margin-left: .7em;
 
-            @media (min-width: $bp-sm) {
+            @media (min-height: $bp-md-v) {
                 font-size: 1.7em;
                 line-height: 1.5em;
             }
@@ -59,7 +59,7 @@ header {
             font-size: .8em;
             vertical-align: middle;
 
-            @media (min-width: $bp-sm) {
+            @media (min-height: $bp-md-v) {
                 font-size: 1.2em;
             }
         }

index.html

@@ -91,7 +91,7 @@ title: Istio
     body {
         padding-top: 2.8rem;
 
-        @media (min-width: $bp-sm) {
+        @media (min-height: $bp-md-v) {
             padding-top: 5rem;
         }
     }