I'm attempting to implement a horizontal scroll on a webpage so that vertical scrolling will result in horizontal movement. I came across some CSS-based code on CodePen that accomplishes this, but unfortunately it's not responsive.
Is there a way to modify this code to make the page responsive? I've included the code snippet below.
#container {
margin-top: -15px;
}
#container .box {
width: 100vw;
height: 100vh;
display: inline-block;
position: relative;
}
#container .box>div {
width: 100%;
height: 100%;
font-size: 96px;
color: #FFF;
position: absolute;
top: 5%;
left: 2.6%;
margin: -50px 0 0 -50px;
line-height: .7;
font-weight: bold;
}
#container {
overflow-y: scroll;
overflow-x: hidden;
transform: rotate(270deg) translateX(-100%);
transform-origin: top left;
background-color: #999;
position: absolute;
width: 100vh;
height: 100vw;
}
#container2 {
transform: rotate(90deg) translateY(-100vh);
transform-origin: top left;
white-space: nowrap;
font-size: 0;
}
.one {
background-color: #45CCFF;
}
.two {
background-color: #49E83E;
}
.three {
background-color: #EDDE05;
}
.four {
background-color: #E84B30;
}<div id="container">
<div id="container2">
<div class="box one">
<div class="full">
<img class="desktop" src="public/images/lookbook/4.jpg" alt="Header" />
</div>
</div>
<div class="box two">
<div>2</div>
</div>
<div class="box three">
<div>3</div>
</div>
<div class="box four">
<div>Last</div>
</div>
</div>
</div>If you have any suggestions, please share them with me!