title: Why is the vertical scroll getting stuck in mobile view?
body: <p>The webpage, when in mobile view, is getting stuck when I attempt to scroll vertically. In <code>@media screen and (max-width: 952px) {}</code> I have <code>overflow-x: hidden;</code>, <code>width: 100%;</code>, and <code>position: absolute;</code> set in order to prevent horizontal scrolling because the mobile nav bar is hidden to the right. I've attempted to add <code>overflow-y: scroll;</code> and <code>overflow-y: auto;</code> to the code and even added <code>!important</code> and I am still experience vertical scroll issues. </p>
  
  <p>You can view a live version of the webpage at <a href="http://jacpel5.dreamhosters.com" rel="nofollow noreferrer">jacpel5.dreamhosters.com</a> </p>
  
  <p>HTML for the 'Photography' page:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Jacki Leigh - Photography&lt;/title&gt; 
              &lt;!-- title appears in browser tab --&gt;
          &lt;link href="myStyleSheet.css" rel="stylesheet" type="text/css"&gt;
              &lt;!-- linking to myStyleSheet.css file for styling --&gt; 
          &lt;link rel="stylesheet" href="https://use.typekit.net/swe6opx.css"&gt;
              &lt;!-- font family "Operetta 8" --&gt;
          &lt;link rel="stylesheet" href="https://use.typekit.net/opw2jnd.css"&gt;
              &lt;!-- font family "Relation Two" --&gt;
          &lt;link href="photos/favicon.png" rel="icon" type="image/gif" sizes="16x16"&gt;
              &lt;!-- linking to the favicon --&gt;
          &lt;meta charset="UTF-8"&gt; 
              &lt;!-- UTF-8 is the default character set for HTML5 --&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
              &lt;!-- viewport gives browser instructions on how to control the page's dimensions and scaling --&gt;
              &lt;!-- width=device-width sets the width of the page to follow the screen-width of the device ---&gt;
              &lt;!-- 1.0 scale sets the initial zoon level when the page is first loaded by the browser --&gt;
          &lt;meta name="robots" content="index, follow"&gt;
              &lt;!-- allows the spider of a search engine to index the whole website --&gt;
          &lt;meta name="keywords" content="Jacki Leigh, photography, light painting, long exposure, music, music photography, portrait photography, portraits, panasonic, camera, photos, live music photography, live music, freelance photographer, freelance, photographer, freelance photography"&gt;
          &lt;meta name="description" content="Jacki Leigh is an LA based freelance photographer. She specializes in concert photography and light painting."&gt;
              &lt;!-- Use no more than 200 characters. This is the description that appears in the search results on search engines --&gt;
          &lt;meta name="author" content="Jacki Leigh Designs"&gt;
      &lt;/head&gt;
      &lt;body&gt;
  
      &lt;header&gt;
          &lt;div class="container"&gt;
  
              &lt;a href="index.html"&gt;
              &lt;img src="photos/logo.png" alt="Jacki Leigh Logo" class="headerLogo"&gt;
              &lt;/a&gt;
  
              &lt;nav&gt;
                  &lt;ul class="nav-links"&gt;
                      &lt;!-- &lt;li&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt; --&gt;
                      &lt;li&gt;&lt;a href="photography.html"&gt;Photography&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="graphic-design.html"&gt;Graphic Design&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="contact.html"&gt;Contact&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
  
                  &lt;div class="burger"&gt;
                      &lt;div class="line1"&gt;&lt;/div&gt;
                      &lt;div class="line2"&gt;&lt;/div&gt;
                      &lt;div class="line3"&gt;&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/nav&gt;
  
          &lt;/div&gt;
      &lt;/header&gt;    
  
      &lt;br /&gt;
  
      &lt;div class="section"&gt;
          &lt;ul class="grid"&gt;
              &lt;li&gt;
                  &lt;div class="box p-cov1"&gt;
                      &lt;a href="concert-photography.html"&gt;
                      &lt;div class="info"&gt;
                          &lt;h3&gt;Concert Photography&lt;/h3&gt;
                      &lt;/div&gt;&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;div class="box p-cov2"&gt;
                      &lt;a href="light-painting.html"&gt;
                      &lt;div class="info"&gt;
                          &lt;h3&gt;Light Painting&lt;/h3&gt;
                      &lt;/div&gt;&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;div class="box p-cov3"&gt;
                      &lt;a href="portraits-people.html"&gt;
                      &lt;div class="info"&gt;
                          &lt;h3&gt;Portraits &amp; People&lt;/h3&gt;
                      &lt;/div&gt;&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;div class="box p-cov4"&gt;
                      &lt;a href="nature.html"&gt;
                      &lt;div class="info"&gt;
                          &lt;h3&gt;Nature&lt;/h3&gt;
                      &lt;/div&gt;&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;div class="box p-cov5"&gt;
                      &lt;a href="animals.html"&gt;
                      &lt;div class="info"&gt;
                          &lt;h3&gt;Animals&lt;/h3&gt;
                      &lt;/div&gt;&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;div class="box p-cov6"&gt;
                      &lt;a href="special-events.html"&gt;
                      &lt;div class="info"&gt;
                          &lt;h3&gt;Special Events&lt;/h3&gt;
                      &lt;/div&gt;&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/li&gt;  
          &lt;/ul&gt;
      &lt;/div&gt;
  
      &lt;br /&gt;
      &lt;br /&gt;
  
      &lt;footer&gt;
          &lt;a href="https://www.facebook.com/JackiLeighDesigns/" target="_blank"&gt;
              &lt;img src="photos/fbicon.png" alt="Facebook Icon" class="fbIcon"&gt;
          &lt;/a&gt;
  
          &lt;a href="https://www.instagram.com/jacki_leigh/" target="_blank"&gt;    
              &lt;img src="photos/instaicon.png" alt="Instagram Icon" class="instaIcon"&gt;
          &lt;/a&gt;
  
          &lt;br /&gt;
  
          &lt;small&gt;copyright &amp;copy; &lt;script type="text/javascript"&gt;document.write(new Date().getFullYear());&lt;/script&gt; Jacki Leigh Designs&lt;/small&gt;
          &lt;/style&gt;
      &lt;/footer&gt;
  
      &lt;script src="javascript/app.js"&gt;&lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS: </p>
  
  <pre><code>body {
      margin: 0;
      background-color: #FCFCFC;
      font-family: "operetta 8", serif;
      font-weight: 300;
      font-style: normal;
      height: 100%;
      width: 100%;
      overflow-y: auto;
      overflow-x: hidden;
      position: absolute;
  }
  
  .container { /* logo and text/links in navigation bar */
      width: 90%;
      margin: 0 auto;
  }
  
  .headerLogo { /* logo in navigation bar */
      /* floating logo to the left */
      /* full canvas photo is 2057px wide &amp; 643px in height */
      float: left;
      padding: 10px 0; /* gives a little space on top and bottom of the logo */
      width: 164.56px; /* 8% of the full size (2057px) */
      height: 51.44px; /* 8% of the full size (643px) */
  }
  
  header {
      background: #E9E9E9;
      opacity: 1;
  }
  
  header::after { 
      /* used because .logo and nav are float left/right, shrinking the container to 0px, this fixes that */
      content: '';
      display: table;
      clear: both;
  }
  
  nav {
      /* floating list (menu) items to the right */
      float: right;
  }
  
  nav ul {
      margin: 0; /* takes space off top and bottom header background */
      padding: 0; /* takes space off the sides */
      list-style: none; /* removes bullet point styling */
  }
  
  nav li {
      display: inline-block; /* places list horizontal, not vertical */
      margin-left: 30px; /* specifies the spacd between the list items */
      padding-top: 25px; /* not required - used for the hover effect for this particular nav bar */
      position: relative; /* allows the nav a::before to keep the hover line relative to the text length */
  }
  
  nav ul li a {
      color: #7F7887;
      text-decoration: none;
      text-transform: uppercase;
      font-size: 17px;
  }
  
  nav ul li a:hover {
      color: #3f003c;
  }
  
  nav ul li a::before {
      content: '';
      display: block;
      height: 2px;
      width: 100%;
      background-color: #3f003c;
  
      position: absolute; /* absolute width 100% shoots this to 100% of the screen size (they run together) */
      top: 0;
      width: 0%;
  
      transition: all ease-in-out 250ms; /* slows down the way the hover bar appears */
  }
  
  nav ul li a:hover::before {
      width: 100%;
  }
  
  a {
      text-decoration: none;
  }
  
  .burger {
      display: none;
      cursor: pointer;
      display: static;
      z-index: 200;
  }
  
  .burger div {
      width: 25px;
      height: 3px;
      background-color: #3f003c;
      margin: 5px;
      transition: all 0.5s ease; /* adds transition to Burger turning into an X */
  }
  
  .mainLogo {
      /* class for logo/image on index page */
      width: 75%;
      height: 60%;
      opacity: 0.9;
  }
  
  .mainLogoDiv {
      /* class for the div containing the logo/image on index page */
      text-align: center;
  }
  
  .section {
      max-width: 1920px;
      margin: 0 auto;
      padding: 1% 2%;
  }
  
  .grid {
      margin: 20px 0 0 0;
      padding: 0;
      list-style: none;
      display: block;
      text-align: center;
      width: 100%;
  }
  
  .grid:after {
      clear: both;
  }
  
  .grid:after, .grid:before {
      content: '';
      display: table;
  }
  
  .grid li {
      width: 200px;
      height: 200px;
      display: inline-block;
      margin: 20px;
  }
  
  .box {
      width: 100%;
      height: 100%;
      position: relative;
      cursor: pointer;
      border-radius: 5px;
      -webkit-transition: 0.3s ease-in-out, 
      -webkit-transform 0.3 ease-in-out;
      -moz-transition: 0.3s ease-in-out, 
      -moz-transform 0.3 ease-in-out;
      transition: 0.3s ease-in-out, 
      transform 0.3s ease-in-out;
  }
  
  .box:hover {
      transform: scale(1.05);
  }
  
  .p-cov1 {
      background: linear-gradient(rgba(65, 41, 63, 0.75), rgba(65, 41, 63, 0.75)),
      url(photos/photography/covers/mj-cover.jpg);
  }
  
  .p-cov2 {
      background: linear-gradient(rgba(65, 41, 63, 0.75), rgba(65, 41, 63, 0.75)),
      url(photos/photography/covers/lp-cover.jpg);
  }
  
  .p-cov3 {
      background: linear-gradient(rgba(65, 41, 63, 0.75), rgba(65, 41, 63, 0.75)),
      url(photos/photography/covers/pp-cover.jpg);
  }
  
  .p-cov4 {
      background: linear-gradient(rgba(65, 41, 63, 0.75), rgba(65, 41, 63, 0.75)),
      url(photos/photography/covers/la-cover.jpg);
  }
  
  .p-cov5 {
      background: linear-gradient(rgba(65, 41, 63, 0.75), rgba(65, 41, 63, 0.75)),
      url(photos/photography/covers/an-cover.jpg);
  }
  
  .p-cov6 {
      background: linear-gradient(rgba(65, 41, 63, 0.75), rgba(65, 41, 63, 0.75)),
      url(photos/photography/covers/se-cover.jpg);
  }
  
  .g-cov1 {
      background: linear-gradient(rgba(65, 41, 63, 0.75), rgba(65, 41, 63, 0.75)),
      url(photos/graphic/covers/dc-cover.jpg);
  }
  
  .g-cov2 {
      background: linear-gradient(rgba(65, 41, 63, 0.75), rgba(65, 41, 63, 0.75)),
      url(photos/graphic/covers/ww-cover.jpg);
  }
  
  .info {
      position: absolute;
      width: 100%;
      height: 100%;
  }
  
  .info h3 {
      font-family: "Operetta 8", serif;
      font-weight: 400;
      color: #e0e0e0;
      text-shadow: 1px 1px black;
      font-size: 20px;
      margin: 0 auto;
      padding: 85px 0px 0 0px;
      text-align: center;
      text-transform: uppercase;
      width: 100%;
  }
  
  .photoGrid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minMax(250px, 1fr));
      grid-gap: 5px 5px;
      width: 90%;
      margin: auto;
  }
  
  .photoColumn {
      display: block;
  }
  
  .contact {
      margin: 0 auto;
  }
  
  .contact-me {
      text-align: center;
  }
  
  .contact-me img {
      width: 60%;
      max-width: 450px;
      padding: 10px 0 20px 0;
  }
  
  form {
      text-align: left;
      font-size: 13.5px;
      padding: 0px 20px 20px 20px; /* gives space on all text contained within border */
      margin: 0 auto;
      line-height: 30px;
      height: 80%;
      width: 70%;
      max-width: 500px;
      overflow: auto;
      text-transform: uppercase;
      color: #3f003c;
  }
  
  input[type=submit] {
      background-color: #3f003c;
      color: #E9E9E9;
      border-radius: 5px;
      height: 35px;
      width: 100px;
      font-size: 15px;
      text-transform: uppercase;
  }
  
  /* the below syntax removes the blue border in the input boxes when selected */
  input:focus, textarea:focus, select:focus {
      outline-offset: 0px !important;
      outline: none !important;
  }
  
  /* the two syntaxes below change the color of highlighted text */
  ::selection {
      background: #E9E9E9; /* WebKit/Blink Browsers */
  }
  
  ::-moz-selection {
      background: #E9E9E9; /* Gecko Browsers */
  }
  
  /* the below set of syntaxes removes the background color when autofill is used */
  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus,
  input:-webkit-autofill:active {
      transition: background-color 5000s ease-in-out 0s;
      -webkit-box-shadow: 0 0 0px 1000px #fff inset;
  }
  
  #name {
      height: 30px;
      width: 100%;
  }
  
  #email {
      height: 30px;
      width: 100%;
  }
  
  #message {
      height: 60px;
      width: 100%;
  }
  
  
  footer {
      color: #7F7887;
      text-align: center;
      text-decoration: none;
  }
  
  .fbIcon {
      /* class for the facebook icon in the footer */
      padding: 0 2px 8px 0;
      width: 25px;
      height: 25px;
      opacity: .7;
  }
  
  .instaIcon {
      /* class for the instagram icon in the footer */
      padding: 0 0 8px 0;
      width: 25px;
      height: 25px;
      opacity: 0.7;
  }
  
  @media screen and (max-width: 952px) {      
      .nav-links {
          position: absolute;
          right: 0px;
          height: 100%;
          top: 70px;
          background-color: #E9E9E9;
          opacity: .95;
          display: flex;
          flex-direction: column;
          align-items: center;
          width: 35%;
          transform: translateX(100vw);
          transition: transform 0.5s ease-in;
          z-index: 100;
      }
  
      .nav-links li {
          margin-left: 0px;
          opacity: 0;
          padding: 45px 0px 0px 0px;
      }
  
      .nav-links li a {
          color: #7F7887;
          text-decoration: none;
          text-transform: uppercase;
          font-size: 14px;
      }
  
      .nav-links li a:hover {
          color: #3f003c;
      }
  
      nav ul li a::before {
          display: none;
      }
  
      .burger {
          display: block;
          padding: 20px;
          z-index: 150;
          position: static;
      }
  }
  
  .nav-active {
      transform: translateX(0%);
  }
  
  @keyframes navLinkFade {
      from {
          opacity: 0;
          transform: translateX(50px);
      }
      to {
          opacity: 1;
          transform: translateX(0px); 
      }
  }
  
  /* 3 code blocks below are to set up the hamburger menu to turn into an X once it's been clicked and the menu slides in from the right */
  
  /* this takes the top hamburger line and turns it -45 degrees to form one part of the X */
  .toggle .line1 {
      transform: rotate(-45deg) translate(-5px,6px);
  }
  
  /* this takes the middle hamburger line and turns it to 0 opacity */
  .toggle .line2 {
      opacity: 0;
  }
  
  /* this takes the bottom hamburger line and turns it 45 degrees to form the second part of the X */
  .toggle .line3 {
      transform: rotate(45deg) translate(-5px,-6px);
  }
  </code></pre>
  
  <p>JavaScript: </p>
  
  <pre><code>const navSlide = () =&gt; {
      const burger = document.querySelector('.burger');
      const nav = document.querySelector('.nav-links');
      const navLinks = document.querySelectorAll('.nav-links li');
  
      burger.addEventListener('click', () =&gt; {
          //Toggle Nav
          nav.classList.toggle('nav-active');
  
          //Animate Links
          navLinks.forEach((link, index) =&gt; {
              if (link.style.animation) {
                  link.style.animation = ''
              } else {
                  link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.5}s`;
              }
          });
  
          //Burger Animation
          burger.classList.toggle('toggle');
      });
  
  }
  
  navSlide();
  </code></pre>