Merge pull request #152 from wpcomvip/AC-1542

Mobile styles for video header with text

Author: Max Harris

themes/jolteon/css/app.css

@@ -76,7 +76,6 @@
 				content: '';
 				left: 292px;
 			}
-
 		}
 	}
 
@@ -122,7 +121,6 @@
 		@include mq($from: desktop) {
 			height: 620px;
 		}
-
 	}
 
 	&__dots {
@@ -254,7 +252,11 @@
 
   &.hero--video {
     flex-flow: column;
-    min-height: 500px;
+    min-height: 95vh;
+
+    @include mq($from: wide) {
+      flex-flow: row;
+    }
 
     .header-video-container {
       margin-top: 80px;
@@ -263,7 +265,7 @@
 
       video {
         background-color: $white;
-        border: 1px solid $white;
+        border: 2px solid $white;
         box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.3);
         height: auto;
         margin: ($padding-large-horizontal * 4) auto 0;
@@ -278,38 +280,75 @@
           max-width: 700px;
         }
 
-        @include mq($from: desktop) {
-          max-width: 800px;
+        @include mq($from: wide) {
+          margin-left: $padding-large-vertical;
+          max-width: 100%;
+          width: 700px;
         }
       }
 
       @include mq($from: tablet) {
         margin-top: 0;
       }
 
-      @include mq($from: desktop) {
+      @include mq($from: wide) {
         margin-top: inherit;
+        padding: 0 ($padding-large-vertical * 3);
       }
     }
 
     .button-container {
       z-index: 5;
 
+      .hero__title {
+        margin-top: 0;
+      }
+
       .cta-button {
-        display: block;
+        display: inline-block;
+        margin: 0 $padding-small-vertical;
+        padding: 0 $padding-large-vertical;
+      }
 
-        @include mq($from: phablet) {
+      @include mq($from: phablet) {
+        .cta-button {
           display: inline-block;
         }
       }
+
+      @include mq($from: wide) {
+        padding: 0 ($padding-large-vertical * 3);
+        text-align: left;
+
+        .hero__title {
+          margin-top: ($padding-large-horizontal * 3);
+          max-width: 670px;
+          padding-bottom: 0;
+        }
+
+        .hero__subtitle {
+          margin-left: 0;
+        }
+
+        .cta-button {
+          margin-left: 0;
+          margin-right: $padding-large-vertical;
+          padding: inherit;
+        }
+      }
     }
 
     @include mq($from: tablet) {
       height: auto;
       max-height: 650px;
+      min-height: 82vh;
     }
 
     @include mq($from: desktop) {
+      min-height: 70vh;
+    }
+
+    @include mq($from: wide) {
       max-height: 720px;
     }
   }