title: Site not vertically scrolling on mobile device
body: <p>I'm newer to html/css and am trying to deploy a very basic construction page, but I cannot figure out how to make it scroll on mobile.  This page will scroll if I test it within the safari browser developer tool for iphone on my desktop, but will not scroll on my actual iphone device. Can anyone help me figure out how to modify so it will scroll on the device?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@import url("font-awesome.min.css");
      @import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic,600,600italic");
  
  
      html, body, div, span, applet, object,
      iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
      pre, a, abbr, acronym, address, big, cite,
      code, del, dfn, em, img, ins, kbd, q, s, samp,
      small, strike, strong, sub, sup, tt, var, b,
      u, i, center, dl, dt, dd, ol, ul, li, fieldset,
      form, label, legend, table, caption, tbody,
      tfoot, thead, tr, th, td, article, aside,
      canvas, details, embed, figure, figcaption,
      footer, header, hgroup, menu, nav, output, ruby,
      section, summary, time, mark, audio, video {
          margin: 0;
          padding: 0;
          border: 0;
          font-size: 100%;
          font: inherit;
          vertical-align: baseline;
      }
  
      article, aside, details, figcaption, figure,
      footer, header, hgroup, menu, nav, section {
          display: block;
      }
  
      body {
          line-height: 1;
      }
  
      ol, ul {
          list-style: none;
      }
  
      table {
          border-collapse: collapse;
          border-spacing: 0;
      }
  
      body {
          -webkit-text-size-adjust: none;
      }
  
      mark {
          background-color: transparent;
          color: inherit;
      }
  
      input::-moz-focus-inner {
          border: 0;
          padding: 0;
      }
  
      input, select, textarea {
          -moz-appearance: none;
          -webkit-appearance: none;
          -ms-appearance: none;
          appearance: none;
      }
  
  
      /* MAIN */
  
  
      html {
          background: url(./assets/gray-wood-background.png);
          box-sizing: border-box;
          background-size: cover;
          background-position: center center;
          background-repeat: no-repeat;
          height: 1080px;
          width: 100%;
          overflow: scroll;
  
          }
  
  
  
  
          body.preload *, body.preload *:before, body.preload *:after {
                  -moz-animation: none !important;
                  -webkit-animation: none !important;
                  -ms-animation: none !important;
                  animation: none !important;
                  -moz-transition: none !important;
                  -webkit-transition: none !important;
                  -ms-transition: none !important;
                  transition: none !important;
              }
  
              body, input, select, textarea {
                  color: #ffffff;
                  font-family: 'Source Sans Pro', sans-serif;
                  font-size: 16pt;
                  font-weight: 300;
                  line-height: 1.65em;
              }
  
      section {
          border: 1px solid white;
          margin: 5% auto 5% auto;
          text-align: center;
          width: 70%;
      }
  
      hr {
          width: 80%;
      }
  
      h1 {
          padding: 40px;
          font-size: 2em;
      }
  
      .logo {
          height: 100px;
          width: 333px;
      }
  
      .copyright {
          text-align: center;
          margin-top: 60px;
          font-size: .65em;
      }
  
  
      @media all and (max-width: 480px) {
  
          html {
          overflow-x: hidden;
          overflow-y: scroll;
          -webkit-overflow-scrolling: touch;
          }
  
      .logo {
              height: 76px;
              width: 225px;
          }
  
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html lang="en"&gt;
          &lt;head&gt;
          &lt;!-- meta --&gt;
              &lt;meta charset="utf-8"&gt;
              &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
              &lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt;
  
              &lt;!-- links --&gt;
  
              &lt;link rel="stylesheet" href="construction-style.css"&gt;
              &lt;!--[if lt IE 9]&gt;
                  &lt;script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"&gt;&lt;/script&gt;
              &lt;![endif]--&gt;
  
          &lt;title&gt;Developed by Gjoraas&lt;/title&gt;
  
          &lt;/head&gt;
  
          &lt;body&gt;
  
  
              &lt;!-- &lt;div style="background-image: url(assets/gray-wood-background.png); width:100%; height:100%;"&gt;&lt;/div&gt; --&gt;
          &lt;!-- MAIN --&gt;
  
              &lt;section&gt;
  
                  &lt;a href="construction.html"&gt;&lt;img class="logo" src="assets/DGlogoTwhite.png" alt="Developed by Gjoraas logo"&gt;&lt;/a&gt;
                  &lt;h1&gt;COMING SOON&lt;/h1&gt;
                  &lt;hr&gt;
  
                  &lt;p&gt;Our website is currently under construction.&lt;/p&gt; 
                  &lt;p&gt;Please check back soon to learn more about our web and app development services.&lt;/p&gt;
  
                  &lt;!-- Copyright --&gt;
                              &lt;div class="copyright"&gt;
                                  &lt;ul class="menu"&gt;
                                      &lt;li&gt;&amp;copy; Developed by Gjoraas 2018&lt;/li&gt;
                                  &lt;/ul&gt;
                              &lt;/div&gt;
              &lt;/section&gt;
  
  
  
  
  
  
          &lt;/body&gt;
      &lt;/html&gt;
      </code></pre>
  </div>
  </div>
  </p>