The webpage, when in mobile view, is getting stuck when I attempt to scroll vertically. In @media screen and (max-width: 952px) {} I have overflow-x: hidden;, width: 100%;, and position: absolute; set in order to prevent horizontal scrolling because the mobile nav bar is hidden to the right. I've attempted to add overflow-y: scroll; and overflow-y: auto; to the code and even added !important and I am still experience vertical scroll issues.
You can view a live version of the webpage at jacpel5.dreamhosters.com
HTML for the 'Photography' page:
<!DOCTYPE html><html><head><title>Jacki Leigh - Photography</title> <!-- title appears in browser tab --><link href="myStyleSheet.css" rel="stylesheet" type="text/css"><!-- linking to myStyleSheet.css file for styling --> <link rel="stylesheet" href="https://use.typekit.net/swe6opx.css"><!-- font family "Operetta 8" --><link rel="stylesheet" href="https://use.typekit.net/opw2jnd.css"><!-- font family "Relation Two" --><link href="photos/favicon.png" rel="icon" type="image/gif" sizes="16x16"><!-- linking to the favicon --><meta charset="UTF-8"> <!-- UTF-8 is the default character set for HTML5 --><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- viewport gives browser instructions on how to control the page's dimensions and scaling --><!-- width=device-width sets the width of the page to follow the screen-width of the device ---><!-- 1.0 scale sets the initial zoon level when the page is first loaded by the browser --><meta name="robots" content="index, follow"><!-- allows the spider of a search engine to index the whole website --><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"><meta name="description" content="Jacki Leigh is an LA based freelance photographer. She specializes in concert photography and light painting."><!-- Use no more than 200 characters. This is the description that appears in the search results on search engines --><meta name="author" content="Jacki Leigh Designs"></head><body><header><div class="container"><a href="index.html"><img src="photos/logo.png" alt="Jacki Leigh Logo" class="headerLogo"></a><nav><ul class="nav-links"><!-- <li><a href="index.html">Home</a></li> --><li><a href="photography.html">Photography</a></li><li><a href="graphic-design.html">Graphic Design</a></li><li><a href="contact.html">Contact</a></li></ul><div class="burger"><div class="line1"></div><div class="line2"></div><div class="line3"></div></div></nav></div></header> <br /><div class="section"><ul class="grid"><li><div class="box p-cov1"><a href="concert-photography.html"><div class="info"><h3>Concert Photography</h3></div></a></div></li><li><div class="box p-cov2"><a href="light-painting.html"><div class="info"><h3>Light Painting</h3></div></a></div></li><li><div class="box p-cov3"><a href="portraits-people.html"><div class="info"><h3>Portraits & People</h3></div></a></div></li><li><div class="box p-cov4"><a href="nature.html"><div class="info"><h3>Nature</h3></div></a></div></li><li><div class="box p-cov5"><a href="animals.html"><div class="info"><h3>Animals</h3></div></a></div></li><li><div class="box p-cov6"><a href="special-events.html"><div class="info"><h3>Special Events</h3></div></a></div></li> </ul></div><br /><br /><footer><a href="https://www.facebook.com/JackiLeighDesigns/" target="_blank"><img src="photos/fbicon.png" alt="Facebook Icon" class="fbIcon"></a><a href="https://www.instagram.com/jacki_leigh/" target="_blank"> <img src="photos/instaicon.png" alt="Instagram Icon" class="instaIcon"></a><br /><small>copyright © <script type="text/javascript">document.write(new Date().getFullYear());</script> Jacki Leigh Designs</small></style></footer><script src="javascript/app.js"></script></body></html>CSS:
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 & 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);}JavaScript:
const navSlide = () => { const burger = document.querySelector('.burger'); const nav = document.querySelector('.nav-links'); const navLinks = document.querySelectorAll('.nav-links li'); burger.addEventListener('click', () => { //Toggle Nav nav.classList.toggle('nav-active'); //Animate Links navLinks.forEach((link, index) => { 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();