better header on mobile

components/Header.js

@@ -2,7 +2,7 @@ import React from 'react'
 import Logo from './svg/Logo'
 
 const Header = ({ enableHeroText }) => (
-  <header role="banner" className="header mb4">
+  <header role="banner" className="mb4">
     <div className="header-content">
       <a id="link-home" href="/" aria-label="Home">
         <Logo />
@@ -10,16 +10,13 @@ const Header = ({ enableHeroText }) => (
       {enableHeroText ? (
         <h2 className="mt3">
           Create and share beautiful images of your source code.
-          <br /> Start typing or drop a file into the text area to get started.
+          <br />
+          Start typing or drop a file into the text area to get started.
         </h2>
       ) : null}
     </div>
     <style jsx>
       {`
-        .header {
-          width: 656px;
-        }
-
         .header-content {
           display: flex;
           flex-direction: column;
@@ -28,11 +25,21 @@ const Header = ({ enableHeroText }) => (
 
         .header-content a {
           height: 64px;
+          max-width: 96vw;
         }
 
         h2 {
           text-align: center;
         }
+
+        @media (max-width: 768px) {
+          header {
+            margin-bottom: var(--x3);
+          }
+          h2 {
+            font-size: 13px;
+          }
+        }
       `}
     </style>
   </header>

components/Page.js

@@ -26,7 +26,7 @@ class Page extends React.Component {
               justify-content: center;
               flex-direction: column;
               align-items: center;
-              min-width: 1080px; // temporary fix for mobile overflow issue
+              min-width: 1080px; /* temporary fix for mobile overflow issue */
             }
           `}
         </style>