Don't use flexbox for <main> on mobile

Author: lorensr

css/raw.js

@@ -37,6 +37,13 @@ a:hover {
   }
 }
 
+main.-landing {
+  display: flex;
+  flex-direction: row;
+  width: 100vw;
+  height: 100%;
+  min-height: 100vh;
+}
 .landing-header {
   width: 43vw;
 }
@@ -51,6 +58,20 @@ a:hover {
   .book-title {
     margin: 10px 0 20px 0;
   }
+
+  main.-landing {
+    display: block;
+    height: auto;
+    min-height: auto;
+  }
+
+  .by-authors {
+    margin-bottom: 10px;
+  }
+
+  .landing-main {
+    padding-top: 20px;
+  }
 }
 
 .ripple-ball {

pages/index.js

@@ -122,15 +122,7 @@ class Index extends Component {
               The GraphQL Guide
             </title>
           </Head>
-          <main
-            className="-landing"
-            style={{
-              display: 'flex',
-              flexDirection: 'row',
-              flexWrap: 'wrap',
-              width: '100vw',
-            }}
-            >
+          <main className="-landing">
             <Paper
               className="landing-header"
               zDepth={2}
@@ -191,6 +183,7 @@ class Index extends Component {
                 </h2>
               </div>
               <div
+                className="by-authors"
                 style={{
                   display: 'flex',
                   alignItems: 'center',
@@ -226,6 +219,7 @@ class Index extends Component {
               </div>
             </Paper>
             <section
+              className="landing-main"
               style={{
                 display: 'flex',
                 flex: '1',