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/