I’m currently working on my portfolio website in React.js. After I saw that the width is larger then the screen size on devices smaller than 900px I added an overflow-x-hidden. One problem was solved, the width wasn’t too large anymore but now I have big issues with scrolling vertical on mobile devices.

It seems like it’s stuck on some parts like text or buttons. This is my current App.jsx:

    const App = () => {
      return (
        <div className="text-neutral-200 antialiased overflow-x-hidden">
          <div className="fixed w-full h-full -z-10 top-0">
            <div className="absolute inset-0 -z-10 h-full w-full items-center px-5 py-24 [background:radial-gradient(125%_125%_at_50%_10%,#000_40%,#63e_100%)]"></div>
          </div>
          <div className="container mx-auto px-8">
            {/*
            
            NOTE: Since these components are undefined in the reproduction, I have commented them out...
            
            <Navbar />
            <Hero />
            <About />
            <Technologies />
            <Projects />
            <Contact />
            <Footer />
          </div>
        </div>
      );
    };

I added touch-action: auto to my CSS but it doesn’t change anything. What can I try next?

Here is a Link to the project repo: https://github.com/13nico01/portfolio