I've build a page with a few sections with videos as background and whenever the user scrolls, there is a scrollsnap to each different section.
However on mobile i would like the user to scroll horizontally instead of verticaly. I know the trick for scrollsnap is to set type: x mandatory, But to get it actually to work i need to change the layout of my page so that instead of
body = 500vh * 100vw on desktop (there is 5 section of 100vh and 100vw each)
it becomes :
body = 100vh * 500vw on mobile
is there anyway to change the layout in such way with media queries ?
html,body{ margin:0; padding:0; background-color: #232323; }
.text_id {
color: #fff;
font-size:calc(12px + 1.8vw);
font-family: 'Montserrat', sans-serif;
font-weight: 600;
text-align: center;
}
.centering_container, .centering_container2, .centering_container3, .centering_container4, .centering_container5 {
z-index: -1;
height:100%;
width:100%;
overflow:hidden;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
position: relative;
}
#wrapper{
position: relative;
height: 100vh;
overflow: hidden;
z-index: 3;
}
#featured {
position: absolute;
z-index: 2;
width: calc(100vh * (1920 / 1080)); /* video width / height */
height: calc(100vw * (1080 / 1920)); /* video height / width */
min-width: 100%;
min-height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#wrapper2{
position: relative;
height: 100vh;
overflow: hidden;
z-index: 2;
}
#featured2{
position: absolute;
z-index: 3;
width: calc(100vh * (1620 / 1080)); /* video width / height */
height: calc(100vw * (1080 / 1620)); /* video height / width */
min-width: 100%;
min-height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#wrapper3 {
position: relative;
height: 100vh;
overflow: hidden;
z-index: 2;
}
#featured3 {
position: absolute;
z-index: 2;
width: calc(100vh * (1920 / 1080)); /* video width / height */
height: calc(100vw * (1080 / 1920)); /* video height / width */
min-width: 100%;
min-height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#wrapper4 {
position: relative;
height: 100vh;
overflow: hidden;
z-index: 4;
}
#featured4 {
position: absolute;
z-index: 2;
width: calc(100vh * (1920 / 1080)); /* video width / height */
height: calc(100vw * (1080 / 1920)); /* video height / width */
min-width: 100%;
min-height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#wrapper5 {
position: relative;
height: 100vh;
overflow: hidden;
z-index: 2;
}
#featured5 {
position: absolute;
z-index: 2;
width: calc(100vh * (960 / 506)); /* video width / height */
height: calc(100vw * (506 / 960)); /* video height / width */
min-width: 100%;
min-height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
video {
z-index: -2;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/******** smooth scroll scrollsnap********/
.scroll-container {
width: 100%;
height: 100vh;
overflow: auto;
-webkit-scroll-snap-type: y mandatory;
-ms-scroll-snap-type: y mandatory;
scroll-snap-type: y mandatory;
}
.receveur {
scroll-snap-align: start;
scroll-behavior: smooth;
}<!-- ************************** WHAT I NEED
IN DESKTOP
------
| 100vh|
| 100vw|
| |
| ↓ |
------
Scrollsnap
------
| 100vh|
|100vw |
| |
| ↓ |
------
Scrollsnap
------
|100vh |
|100vw |
| |
| ↓ |
------
IN MOBILE
------ ------ ------
|100vh | |100vh | |100vh |
|100vw | |100vw | |100vw |
| |Scrollsnap| |Scrollsnap| |
| → | → | → | → | → |
| | | | | |
------ ------ ------
***********--!>
<!-- ****************************** FIRST section ********************************* -->
<div class="scroll-container">
<div class="receveur receveur-1"></div>
<div id="wrapper">
<div id="featured">
<video autoplay="true" muted="true" loop>
<source src="style/vid/3_third.mp4" type="video/mp4" />
</video>
<div class="centering_container">
<div class="text_id">
<h1 style="line-height:120%;">Section 1</h1>
</div>
</div>
</div>
</div>
<!-- ****************************** SECOND section ********************************* -->
<div class="receveur receveur-2" id="arrowscroll"></div>
<div id="wrapper2">
<div id="featured2">
<video autoplay="true" muted="true" loop>
<source src="style/vid/1_first.mp4" type="video/mp4" />
</video>
<div class="centering_container2">
<div class="text_id">
<h1 style="line-height:120%;">SECTION<br>2<span class="tim">™</span></h1>
</div>
</div>
</div>
</div>
<!-- ***************************** THIRD sectiom ********************************************* -->
<div class="receveur receveur-3"></div>
<div id="wrapper3">
<div id="featured3">
<video autoplay="true" muted="true" loop>
<source src="style/vid/2_second.mp4" type="video/mp4" />
</video>
<div class="centering_container3">
<div class="text_id">
<h1 style="line-height:120%;">Section <br>3</h1>
</div>
</div>
</div>
</div>
<!-- ***************************** FOURTH VIDEO ********************************************* -->
<div class="receveur receveur-4"></div>
<div id="wrapper4">
<div id="featured4">
<video autoplay="true" muted="true" loop>
<source src="style/vid/5_fifth.mp4" type="video/mp4" />
</video>
<div class="centering_container4">
<div class="text_id">
<h1>Section 4</h1>
</div>
</div>
</div>
</div>
<!-- ***************************** FIFTH VIDEO ********************************************* -->
<div class="receveur receveur-5"></div>
<div id="wrapper5">
<div id="featured5">
<video autoplay="true" muted="true" loop>
<source src="style/vid/4_fourth.mp4" type="video/mp4" />
</video>
<div class="centering_container5">
<div class="text_id">
<h1>Section 5</h1>
</div>
</div>
</div>
</div>
</div>
</div>
Using flex we can achieve what you need:
I don't know what your breakpoints are but I've put 600px for the demo:
@media (max-width: 600px) {
/* targeting all wrappers - should probably have some kind of class */
div[id^="wrapper"] {
height: 100vh;
width: 100vw;
flex-basis: 100vw;
flex-shrink: 0;
}
.scroll-container {
width: auto;
height: 100vh;
display: flex;
flex-direction: row;
overflow: auto;
-webkit-scroll-snap-type: x mandatory;
-ms-scroll-snap-type: x mandatory;
scroll-snap-type: x mandatory;
}
}
Basically, flex (display:flex) on the container forces all the wrappers to line up in a row (flex-direction:row). Then on the wrappers we say you should be 100% of the view's width (flex-basis:100vw) and you cannot be smaller (flex-shrink: 0).
Then we just switch the scroll snap. However, you might want to check scroll snap is supported in what devices you're targeting https://caniuse.com/?search=scroll-snap