Good day to anyone who is reading this. THE PROBLEM So basically I am using elemntor pro to create a horizontal scrolling website and I have successfully achieved that with a bit of code but just have one issue so the website scrolls horizontally on all screen dimensions just that on mobile portrait it scrolls vertically so basically I want the website to scroll horizontally across all screen dimensions. Below I have also mentioned and written down the code that I am using. THE CODE On elementor page settings I am using this code: scroll-behavior: {auto; } main { overflow-x: hidden; display: flex; } @media only screen and (min-width: 767px) { main { display: flex; overflow-x:auto; overflow-y:hidden; } } section { min-width: 100vw!important; min-height: 100vh!important; } and on the page itself I have dropped a HTML widget where I am using this code: <script type="text/javascript"> if (window.innerWidth > 1025) { const scrollContainer = document.querySelector("main"); scrollContainer.addEventListener("wheel", (evt) => { evt.preventDefault(); scrollContainer.scrollLeft += evt.deltaY; }); } else { } </script> Link to the page I am talking about is: https://staging.austingualazzi.com/home-page/