display: 'none' and 'block' not working on mobile device (on Shogun)

Question

It functions properly on PC, but for some reason, the filtering doesn't seem to work on mobile devices. I've used 'display: none' and 'block' for this function, and particularly, it's not functioning on mobile. (The ProductContainers exist within Shogun elements.)

<style>
  .product-list {
    display: inline;
  }
  
  .allProductContainerM {
    display: block;
  }

  .accessoriesContainerM,
  .skinAndCoatContainerM,
  .allergyContainerM,
  .jointHealthContainerM {
    display: none !important;
  }
  
.wrap {
  max-width:500px;
  height: 130px;
}
.scroll__wrap {
  overflow-x:auto; 
  white-space:nowrap; 
  font-size:0;
  padding: 15px;
}
.scroll--element {
  display: inline-block; 
  width:100px; 
  height:150px; 
  border-radius:90%; 
  color:white; 
  font-weight:bold; 
  font-size:12px; 
  line-height:100px; 
  text-align:center; 
  cursor: pointer;
  
}
.scroll--element + .scroll--element {
  margin-left:15px;
  
}
.no-scroll {
  -ms-overflow-style: none; 
  scrollbar-width: none; 
}
.no-scroll::-webkit-scrollbar {
  display: none; 
}

</style>

<div class="wrap">
  <div class="scroll__wrap no-scroll">
    <div class="scroll--element img1 filter-btnM shopallM">Shop All</div>
    <div class="scroll--element img2 filter-btnM jointhealthM">Joint Health</div>
    <div class="scroll--element img3 filter-btnM allergyM">Allergy</div>
    <div class="scroll--element img4 filter-btnM skinandcoatM">Skin and Coat</div>
    <div class="scroll--element img5 filter-btnM accessoriesM">Accessories</div>
  </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const buttonsM = document.querySelectorAll('.filter-btnM');
        const shopAllBtnM = document.querySelector('.shopallM');
        const jointHealthBtnM = document.querySelector('.jointhealthM');
        const allergyBtnM = document.querySelector('.allergyM');
        const skinAndCoatBtnM = document.querySelector('.skinandcoatM');
        const accessoriesBtnM = document.querySelector('.accessoriesM');

        const allProductContainerM = document.querySelector('.allProductContainerM');
        const jointHealthContainerM = document.querySelector('.jointHealthContainerM');
        const allergyContainerM = document.querySelector('.allergyContainerM');
        const skinAndCoatContainerM = document.querySelector('.skinAndCoatContainerM');
        const accessoriesContainerM = document.querySelector('.accessoriesContainerM');

        function resetButtonStyles() {
            buttonsM.forEach((button) => {
                button.style.borderRadius = '';
                button.style.boxShadow = '';
            });
        }

        //shop all
        function shopAllFilterM() {
            allProductContainerM.style.display = '';
            jointHealthContainerM.style.display = 'none';
            allergyContainerM.style.display = 'none';
            skinAndCoatContainerM.style.display = 'none';
            accessoriesContainerM.style.display = 'none';
  
            resetButtonStyles();
            shopAllBtnM.style.borderRadius = '90em';
            shopAllBtnM.style.boxShadow = '0px 0px 0px 6px #F37F20';
        }

        shopAllBtnM.addEventListener('click', function () {
            shopAllFilterM();
        });

        //joint health
        function jointHealthFilterM() {
            jointHealthContainerM.style.display = '';
            allProductContainerM.style.display = 'none';
            allergyContainerM.style.display = 'none';
            skinAndCoatContainerM.style.display = 'none';
            accessoriesContainerM.style.display = 'none';

            resetButtonStyles();
            jointHealthBtnM.style.borderRadius = '90em';
            jointHealthBtnM.style.boxShadow = '0px 0px 0px 6px #F37F20';
        }

        jointHealthBtnM.addEventListener('click', function () {
            jointHealthFilterM();
        });

        //allergy
        function allergyFilterM() {
            allergyContainerM.style.display = '';
            allProductContainerM.style.display = 'none';
            jointHealthContainerM.style.display = 'none';
            skinAndCoatContainerM.style.display = 'none';
            accessoriesContainerM.style.display = 'none';

            resetButtonStyles();
            allergyBtnM.style.borderRadius = '90em';
            allergyBtnM.style.boxShadow = '0px 0px 0px 6px #F37F20';
        }

        allergyBtnM.addEventListener('click', function () {
            allergyFilterM();
        });

        //skin and coat
        function skinAndCoatFilterM() {
            skinAndCoatContainerM.style.display = ''; 
            allProductContainerM.style.display = 'none'; 
            jointHealthContainerM.style.display = 'none';
            allergyContainerM.style.display = 'none';
            accessoriesContainerM.style.display = 'none';
            
            resetButtonStyles();
            skinAndCoatBtnM.style.borderRadius = '90em';
            skinAndCoatBtnM.style.boxShadow = '0px 0px 0px 6px #F37F20';
        }

        skinAndCoatBtnM.addEventListener('click', function () {
            skinAndCoatFilterM();
        });

        //accessories
        function accessoriesFilterM() {
            accessoriesContainerM.style.display = '';
            allProductContainerM.style.display = 'none';
            jointHealthContainerM.style.display = 'none';
            allergyContainerM.style.display = 'none';
            skinAndCoatContainerM.style.display = 'none';

            resetButtonStyles();
            accessoriesBtnM.style.borderRadius = '90em';
            accessoriesBtnM.style.boxShadow = '0px 0px 0px 6px #F37F20';
        }

        accessoriesBtnM.addEventListener('click', function () {
            accessoriesFilterM();
        });
    });
</script>

I also tried using visibility, and it did work; however, the spaces were not removed even after setting width: 0 and height: 0.