<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Youtube | Insta | Tiktok | Reels </title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: black;
}
.reelsContainer {
/* background: pink; */
height: 80vh;
width: 25vw;
margin-top: 4em;
display: flex;
overflow: auto;
gap: 2em;
flex-direction: column;
scroll-snap-type: y mandatory;
}
.reelsContainer::-webkit-scrollbar {
display: none;
}
.reel {
min-height: 75vh;
min-width: 25vw;
background-color: red;
scroll-snap-align: start;
}
</style>
</head>
<body>
<div style="display: flex; justify-content: center;">
<div class="reelsContainer">
<div class="reel">1</div>
<div class="reel">2</div>
<div class="reel">3</div>
<div class="reel">4</div>
<div class="reel">5</div>
<div class="reel">6</div>
</div>
</div>
</body>
</html>
Top comments (4)
Exactly what I needed to get started. Thanks!
How can we restrict user to scroll multiple reels once?
is it possible?
for some reason, in mobile view, the reels are very squeezed, why? and how would you fix it?
Because the width is 25vw which means 25 parts of 100 parts of screen so basically when you are in an mobile view of let's say 200px it's just 8px of width that's why
so a quick fix is -> write a media query for mobile and change the reelsContainer to 90vw !
I hope it answers your question !