Merge pull request #464 from openforge/fix/opportunities-mobile-animation

fix(app-opportunities): update mobile height of header

Author: Wholloran

src/pages/app-opportunities/app-opportunities.scss

@@ -22,9 +22,12 @@
         background-size: contain;
         margin-top: 0;
         padding-top: 60px;
-        height: 100vh;
+        height: 110vh;
         background-image: url('/assets/opportunities/opportunities-mobile-header-animated.svg');
       }
+      @media (max-height: 640px) {
+        height: 120vh;
+      }
     }
 
     &.header-transition-dev {
@@ -43,9 +46,12 @@
         margin-top: 0;
         padding-top: 50px;
         background-position: bottom;
-        height: 100vh;
+        height: 110vh;
         background-image: url('/assets/opportunities/opportunities-mobile-transition-dev.svg');
       }
+      @media (max-height: 640px) {
+        height: 120vh;
+      }
     }
 
     &.header-transition-design {
@@ -64,9 +70,12 @@
         margin-top: 0;
         padding-top: 50px;
         background-position: bottom;
-        height: 100vh;
+        height: 110vh;
         background-image: url('/assets/opportunities/opportunities-mobile-transition-design.svg');
       }
+      @media (max-height: 640px) {
+        height: 120vh;
+      }
     }
 
     &.header-transition-dev-design {
@@ -85,9 +94,12 @@
         margin-top: 0;
         padding-top: 50px;
         background-position: bottom;
-        height: 100vh;
+        height: 110vh;
         background-image: url('/assets/opportunities/opportunities-mobile-transition-dev-design.svg');
       }
+      @media (max-height: 640px) {
+        height: 120vh;
+      }
     }
 
     &.header-transition-design-dev {
@@ -106,9 +118,12 @@
         margin-top: 0;
         padding-top: 50px;
         background-position: bottom;
-        height: 100vh;
+        height: 110vh;
         background-image: url('/assets/opportunities/opportunities-mobile-transition-design-dev.svg');
       }
+      @media (max-height: 640px) {
+        height: 120vh;
+      }
     }
 
     &.header-dev-active {
@@ -127,9 +142,12 @@
         margin-top: 0;
         background-position: bottom;
         padding-top: 50px;
-        height: 100vh;
+        height: 110vh;
         background-image: url('/assets/opportunities/opportunities-mobile-dev-active.svg');
       }
+      @media (max-height: 640px) {
+        height: 120vh;
+      }
     }
 
     &.header-design-active {
@@ -148,9 +166,13 @@
         margin-top: 0;
         padding-top: 50px;
         background-position: bottom;
-        height: 100vh;
+        height: 110vh;
         background-image: url('/assets/opportunities/opportunities-mobile-design-active.svg');
       }
+
+      @media (max-height: 640px) {
+        height: 120vh;
+      }
     }
 
     .container,