My javascript code does not work when I add media query?

Question

Never ran into this problem before. Basically I added a class list toggle on my header via Javascript, and it normally works fine, but when I add media queries that have nothing to do with the header, it stops working. If you need any more info let me know. Any ideas? I'm lost

EDIT: Added additional HTML Code

Here's all my code

 window.addEventListener('scroll', () => { let header = document.querySelector('.page-header'); header.classList.toggle('sticky', window.scrollY > 30); })

 .page-header { width: 100%; height: 60px; background-color: var(--main-bg-color); display: flex; flex-direction: row; align-items: center; color: white; font-weight: bold; overflow: hidden; position: fixed; transition: .7s; z-index: 1; } .page-header.sticky { background-color: white; color: black; position: fixed; z-index: 1; transition: .7s; box-shadow: 5px 5px 3px lightgray; } .portfolio-images { width: 100%; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 20px; margin-top: 50px; } .portfolio-images img { margin-right: auto; margin-left: auto; } .portfolio-images img:hover { filter: brightness(.4); transition: .4s; cursor: pointer; } /* media queries */ @media all and (max-width: 1275px) { .portfolio-images { grid-template-columns: 1fr 1fr; } .portfolio-images img { width: 40vw; height: auto; } @media all and (max-width: 500px) { .portfolio-images { grid-template-columns: 1fr; } .portfolio-images img { width: 90vw; height: auto; } }

 <div class="page-header"> <h1 id="logo">ParallaxStudios</h1> <div class="navigation-container"> <ul> <li><a class="navigation-item">Portfolio</a></li> <li><a class="navigation-item">Socials</a></li> <li><a class="navigation-item">Staff</a></li> </ul> </div> <div class="rightside-navigation"> <h3 id="contact">Contact</h3> </div> </div> <div class="portfolio-container"> <h1>Current Projects</h1> <div class="portfolio-images"> <img src="https://via.placeholder.com/420"> <img src="https://via.placeholder.com/420"> <img src="https://via.placeholder.com/420"> <img src="https://via.placeholder.com/420"> <img src="https://via.placeholder.com/420"> <img src="https://via.placeholder.com/420"> <img src="https://via.placeholder.com/420"> <img src="https://via.placeholder.com/420"> <img src="https://via.placeholder.com/420"> </div> </div>

Answer 1

You literally have one missing } in the end the of one of the Media Queries here:

@media all and (max-width: 1275px) {
    .portfolio-images {
      grid-template-columns: 1fr 1fr;
    }
    .portfolio-images img {
      width: 40vw;
      height: auto;
  }
} //this one was missing.
  
  @media all and (max-width: 500px) {
    .portfolio-images {
      grid-template-columns: 1fr;
    }
    .portfolio-images img {
      width: 90vw;
      height: auto;
    }
  }