Adjust mobile landing page (#4366)

* Adjust mobile landing page

Change mobile viewport threshold to 840px in consideration of padding. Fix loss of "container hero" padding in about/more under 675px.

* Fix indent

diff --git a/app/javascript/styles/about.scss b/app/javascript/styles/about.scss
index 8aa5d8eb497b0b552f81a90ddfdc45c7bc8a72ed..5a4bcef61250e303b2a9fa507b4e88b5787a08f6 100644 (file)
--- a/app/javascript/styles/about.scss
+++ b/app/javascript/styles/about.scss
@@ -646,7 +646,7 @@
     }
   }
 
-  @media screen and (max-width: 800px) {
+  @media screen and (max-width: 840px) {
     .container {
       padding: 0 20px;
     }
@@ -688,6 +688,10 @@
   @media screen and (max-width: 675px) {
     .header-wrapper {
       padding-top: 0;
+
+      &.compact .hero .heading {
+        padding-bottom: 20px;
+      }
     }
 
     .header .container,
@@ -701,15 +705,9 @@
     }
 
     .header {
-      padding-top: 0;
 
       .hero {
         margin-top: 30px;
-        padding: 0;
-
-        .heading {
-          padding-bottom: 20px;
-        }
       }
 
       .floats {