So, i decided to use scroll snapping in the website i am creating, but for some reason, even after following 5/6 tutorials on youtube, none of them worked for me, i tried to add scroll snapping to each home div but that didn't work, so i changed 3 or 4 times this code, tried putting the snap type in container, in body, but none of that worked. (that's not the full css code, but only the important ones)
If anyone can help, i would appreciate.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: "Montserrat", sans-serif;
scroll-behavior: smooth;
}
html {
scroll-snap-type: y mandatory;
overflow-y: auto;
}
.container {
position: relative;
width: 100%;
height: 100%;
}
.body .home-1 .home-2 .home-3 .home-4 .home-5 .home-6 .home-7 .home-8 .home-9 .home-10 {
scroll-snap-align: start;
}
.home-1 {
height: 100vh;
width: 100%;
background-color: #DBDBDB;
display: flex;
position: absolute;
} <!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">
<link rel="stylesheet" href="assets/css/main.css" type="text/css">
<title>Portfolio</title>
</head>
<body>
<div class="container">
<div class="home-1">
<div class="menu">
<p>Menu</p>
</div>
<div class="top-links">
<a href="#" class="about-me">About Me</a>
<a href="#" class="works">Works</a>
</div>
<div class="right-buttons">
<li onclick="toggleLanguage('English')"><a href="#">En</a></li>
<li onclick="toggleLanguage('Portuguese')"><a href="#">Pt</a></li>
</div>
<div class="logo-holder">
<div class="title-center"><img src="assets/imgs/sample-logo.png"></div>
</div>
<div class="bottom-links">
<a href="#" class="about-me">Instagram</a>
<a href="#" class="works">Behance</a>
</div>
<div class="email">
<p>alo@scarrard.co</p>
</div>
</div>
<div class="home-2">
</div>
<div class="home-3">
<div class="row">
<div class="column">
<h1>My name is <br>
Sabrina Carrard,<br>
I’m a graphic designer <br>
and passionate <br>
about creating <br>
things and animals. <br>
</h1>
<hr class="solid">
<p>Before we say goodbye, you can get in <br>
touch through my email in Portuguese, <br>
English and French (I’m learning that, <br>
so please, be kind). <br>
</p>
</div>
<div class="column-2">
<p>My formal education was in UTFPR,
where I graduated in graphic design
as well. I started to work still I was in
college, and worked with brands like
ONU, Abril, Red Balloon, Wise up,
Porcelanosa, Medianeira, SEBRAE,
Prata e Arte, Bel Pesce, Universidade
do Intercâmbio e Casa Paraíso
Ecológico. Today I like to consider
myself as a brand and editorial
designer, things I really enjoy
while I’m working on.
</p>
<p>I started to care about art when
I was in school. At the time, I was
obsessed with movies and used to
watch four or five movies a day (but
I was a fine student, I swear). After
that I fell in love with art in
my college days, especially art
history. Today I’m very interested
in the discussion between gender
and art. Female artists, what they
did and their stories, really caught me.
</p>
</div>
<div class="column-3">
<p>
Besides animals, other thing that
is really important to know is that
I’m fascinated by books and
literature. I truly believed that
literature opened my eyes to
important questions such as
human rights and feminism.
So when I’m reading something,
usually they are novels related
to these subjects because it
is something that I care about
</p>
</div>
</div>
</div>
<div class="home-4">
</div>
<div class="home-5">
</div>
<div class="home-6">
<div class="gallery">
<figure class="gallery__item gallery__item--1 ">
<img src="assets/imgs/projetopessoal/Saba/saba/imghome/imghome.png" class="gallery__img " alt="Image 1 ">
</figure>
<figure class="gallery__item gallery__item--2 ">
<img src="assets/imgs/projetopessoal/Aurora/aurora/imghome/imghome.png" class="gallery__img " alt="Image 2 ">
</figure>
<figure class="gallery__item gallery__item--3 ">
<img src="assets/imgs/projetopessoal/Tempodachuva/tempodachuva/imghome/imghome.png" class="gallery__img " alt="Image 3 ">
</figure>
<figure class="gallery__item gallery__item--4 ">
<img src="assets/imgs/projetopessoal/Zinebrabas/zinebrabas/imghome/SCARRARD-Portfolio_imagem home_Zine.jpg" class="gallery__img " alt="Image 4 ">
</figure>
<figure class="gallery__item gallery__item--5 ">
<img src="assets/imgs/projetopessoal/Bunker/bunker/home/imghome.png" class="gallery__img " alt="Image 5 ">
</figure>
</div>
</div>
<div class="home-7">
</div>
<div class="home-8">
</div>
<div class="home-9">
<div class="gallery">
<figure class="gallery__item gallery__item--1 ">
<img src="assets/imgs/marcasB/PrataEArte/Prata/imghome/SCARRARD-Portfolio_imagem home_Prata e arte.png" class="gallery__img " alt="Image 1 ">
</figure>
<figure class="gallery__item gallery__item--2 ">
<img src="assets/imgs/marcasB/Oliveira/oliveira/imghome/SCARRARD-Portfolio_imagem home_Oliveira.png" class="gallery__img " alt="Image 2 ">
</figure>
<figure class="gallery__item gallery__item--3 ">
<img src="assets/imgs/marcasB/Transformando/transformando/imghome/SCARRARD-Portfolio_imagem home_Tranformando.jpg" class="gallery__img " alt="Image 3 ">
</figure>
<figure class="gallery__item gallery__item--4 ">
<img src="assets/imgs/marcasB/CarinaDiniz/Carina/imghome/SCARRARD-Portfolio_imagem home_Carina Diniz.png" class="gallery__img " alt="Image 4 ">
</figure>
</div>
</div>
<div class="home-10">
</div>
</div>
</body>
</html>