why does switching to mobile layout make the javascript scroll button not work

when i’m at my desktop version it works normally as it should, scrolling up and down.
but when i go to the mobile version it doesn’t work as it should

<div class="everything">
            <div id="windowhof">
            </div>
            <div class="HOFcontainer">
                
                <div class="HOFdisplay">
                    
                    <div class="HOFchunks">
                       
                        <div class="HOFcards">
                            <img src="./hof/300px-ARS-pieces.png" alt="" width=" 175px">
                         </div>
    
                         <div class="HOFcards">
                            <img src="./hof/300px-ARS-pieces.png" alt="" width=" 175px">
                         </div>
    
                         <div class="HOFcards">
                            <img src="./hof/300px-ARS-pieces.png" alt="" width=" 175px">
                         </div>
    
                         <div class="HOFcards">
                            <img src="./hof/300px-ARS-pieces.png" alt="" width=" 175px">
                         </div>
                     </div>
                    <div class="HOFchunks">
                       
                        <div class="HOFcards">
                            <img src="./hof/300px-ARS-pieces.png" alt="" width=" 175px">
                         </div>
    
                         <div class="HOFcards">
                            <img src="./hof/300px-ARS-pieces.png" alt="" width=" 175px">
                         </div>
    
                         <div class="HOFcards">
                            <img src="./hof/300px-ARS-pieces.png" alt="" width=" 175px">
                         </div>
    
                         <div class="HOFcards">
                            <img src="./hof/300px-ARS-pieces.png" alt="" width=" 175px">
                         </div>
                     </div>
                     <div class="HOFchunks">
                        <div class="HOFcards">
                            <img src="./hof/300px-ARS-pieces.png" alt="" width=" 175px">
                         </div>
    
                         <div class="HOFcards">
                            <img src="./hof/300px-ARS-pieces.png" alt="" width=" 175px">
                         </div>
    
                         <div class="HOFcards">
                            <img src="./hof/300px-ARS-pieces.png" alt="" width=" 175px">
                         </div>
    
                         <div class="HOFcards">
                            <img src="./hof/300px-ARS-pieces.png" alt="" width=" 175px">
                         </div>
                     </div>
                     <div class="HOFchunks">
                        <div class="HOFcards">
                            <img src="./hof/300px-ARS-pieces.png" alt="" width=" 175px">
                         </div>
    
                         <div class="HOFcards">
                            <img src="./hof/300px-ARS-pieces.png" alt="" width=" 175px">
                         </div>
    
                         <div class="HOFcards">
                            <img src="./hof/300px-ARS-pieces.png" alt="" width=" 175px">
                         </div>
    
                         <div class="HOFcards">
                            <img src="./hof/300px-ARS-pieces.png" alt="" width=" 175px">
                         </div>
                     </div>
                     <div class="HOFchunks">
                        <div class="HOFcards">
                            <img src="./hof/300px-ARS-pieces.png" alt="" width=" 175px">
                         </div>
    
                         <div class="HOFcards">
                            <img src="./hof/300px-ARS-pieces.png" alt="" width=" 175px">
                         </div>
    
                         <div class="HOFcards">
                            <img src="./hof/300px-ARS-pieces.png" alt="" width=" 175px">
                         </div>
    
                         <div class="HOFcards">
                            <img src="./hof/300px-ARS-pieces.png" alt="" width=" 175px">
                         </div>
                     </div>
                </div>
                <div class="buttonbox">
                    <button id="scrollUp" class="scrollButton">▲</button>
                    <button id="scrollDown" class="scrollButton">▼</button>
                  </div>
            </div>

and here’s the javascript

//HOF//

const scrollUpButton = document.getElementById("scrollUp");
const scrollDownButton = document.getElementById("scrollDown");
const display = document.querySelector(".HOFdisplay");
const rowHeight = display.querySelector(".HOFchunks").offsetHeight;

function scrollDisplay(direction) {
  display.scrollBy({ top: direction * rowHeight, behavior: "smooth" });
}

if (scrollUpButton && scrollDownButton) {
  scrollUpButton.addEventListener("click", () => scrollDisplay(-1));
  scrollDownButton.addEventListener("click", () => scrollDisplay(1));
}

i tried rewriting the javascipt and still doesn’t work. i thought it was something with the ID’s or something it also wasn’t it.