Add this to the Advanced Tab of the Page Settings. Click the Bottom Left Cog, and then add.
.elementor-section-wrap{
display: inline-flex;
}
.elementor-section{
width:100vw;
}
.custom-width{
width: 100px;
}
body{
overflow-y: hidden;
overscroll-behavior-y: none;
}
@media (max-width:768px){
.elementor-section-wrap{
display: block;
}
}
And then – go to WordPress > Elementor > Custom Code, and add this.
Ensure the Location Dropdown is changed to be <Body> – End
Publish it to be on the Singular Pages where it should be applied.
<script type="text/javascript">
function replaceVerticalScrollByHorizontal( event ) {
if ( event.deltaY !== 0 ) {
window.scroll(window.scrollX + event.deltaY * 2, window.scrollY );
event.preventDefault();
}
}
const mediaQuery = window.matchMedia( '(min-width: 770px)' );
if ( mediaQuery.matches ) {
window.addEventListener( 'wheel', replaceVerticalScrollByHorizontal );
}
</script>
