I have designed a webpage that displays a side menu on the left and images on the right for desktop users, while mobile users see a select option at the top instead of the side menu. The functionality of the page involves sorting the images on the right based on the category selected from the menu. However, I am facing an issue with the select menu not working properly on mobile devices. Even though resizing the browser triggers the select menu to work, it fails to function as expected on mobile. Despite no visible errors, I am unable to pinpoint the exact cause of this problem. Can someone help me identify where I went wrong?
To illustrate the issue, I have created a demonstration on JSFiddle: JSFIDDLE
Below is a snippet of my code.
This snippet belongs to products.html
Your HTML code here...Next, we have the CSS styling:
Your CSS code here...Lastly, the JavaScript section:
Your JavaScript code here...UPDATE: Upon investigating the issue further, I came across a notification that could offer valuable insights into the problem:
[Violation] Added non-passive event listener to a scroll-blocking 'mousewheel' event. Consider marking event handler as 'passive' to make the page more responsive. See