Responsive CSS Horizontal Scroll - html

Question

I am trying to add a horizontal scroll onto a page so that when you scroll vertically, the page scrolls horizontally. I found a piece of code that can do this which is entirely CSS based however it doesn't seem to be responsive. I found this on CodePen.
Is there any way in which this code can be transformed into the page being responsive?
I've attached the code 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 anyone has any idea - please let me know!

Answer 1

I took the initiative to remove all those ugly white spaces and scroll bars, plus what you asked for: Codepen
body,
html {
height: 100%;
width: 100%;
margin: 0;
}
#container {
width: calc(100vh + 17px);
height: 100vw;
margin-top: -17px;
margin-right: 100px;
overflow-y: scroll;
overflow-x: hidden;
transform: rotate(270deg) translateX(-100%);
transform-origin: top left;
background-color: #999;
position: absolute;
}
#container2 {
transform: rotate(90deg) translateY(-100vh);
transform-origin: top left;
white-space: nowrap;
font-size: 0;
}
#container .box {
width: 100vw;
height: 100vh;
display: inline-block;
position: relative;
}
#container .box > div {
font-size: 96px;
color: #FFF;
position: absolute;
top: 0;
left: 0;
margin: 0;
line-height: 0.9;
font-weight: bold;
}
.full {
height: 100%;
width: 100%;
position: relative;
}
.desktop {
width: 100%;
height: 100%;
display: block;
position: absolute;
background-size: cover;
}
.one {background-color: #45CCFF;}
.two {background-color: #49E83E;}
.three {background-color: #EDDE05;}
.four {background-color: #E84B30;}

Answer 2

Here is the code you want, use the image as a background instead. This allows it to cover the div completely as you'd like it to. Whilst also being responsive.
body,
html {
height: 100%;
width: 100%;
margin: 0;
}
#container .box {
width: 100vw;
height: 100vh;
display: inline-block;
position: relative;
background-size: cover;
}
#container .box>div {
width: 100%;
height: 100%;
font-size: 96px;
color: #FFF;
position: absolute;
top: 5%;
margin: 20px 0px 0px;
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;
background-image: url(https://images.pexels.com/photos/1022454/pexels-photo-1022454.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);
}
.two {
background-color: #49E83E;
background-image: url(https://images.pexels.com/photos/1023949/pexels-photo-1023949.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);
}
.three {
background-color: #EDDE05;
background-image: url(https://images.pexels.com/photos/963071/pexels-photo-963071.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);
}
.four {
background-color: #E84B30;
background-image: url(https://images.pexels.com/photos/1022928/pexels-photo-1022928.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);
}
<div id="container">
<div id="container2">
<div class="box one">
<div class="full">
<div>1</div>
</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>