Scroll snapping/div spacing when scrolling
Firstly I'm trying to have it so that when I'm scrolling down, it smoothly snaps into each project on the way down (is that even possible?)
Secondly, how the heck do you space out your projects/divs when scrolling? right now I have margin-bottom: 500px which I absolutely hate, and it still doesn't solve how close my first project is to my icons at the top, nor does it solve how small my last project is due to the footer also taking up space.
codepen:
https://codepen.io/Laing91/pen/VwgrOZV
git repo:
https://github.com/callum-laing/sv-portfolio/tree/main
site demo:
https://cdl.netlify.app/
GitHub
GitHub - callum-laing/sv-portfolio: built in sveltekit
built in sveltekit. Contribute to callum-laing/sv-portfolio development by creating an account on GitHub.
8 Replies
give the .project-card a min-height, for example 100vh if you want a full window height size. then you can set align-items: center to get it in the middle of that
hey that works, it's what tested earlier but I think 50 works better for it. I perhaps need to adjust the bottom project as the dividing line seems to split into the screen (feels weird having nothing inbetween each project)
ah great this explains it better
https://codepen.io/Laing91/pen/VwgrOZV
i believe the issue is the faint-line is uhh.. silly.
removing the margin on faint-line does kinda let me accept the bottom section, but then the top section is too far down, adn the others are meh, so perhaps I need to tweak top and bottom, and leave mid 100dvh
other option is to set
then you don't need the min-height and alignment on the cards
all have different effects, you'll have to play with it a bit to see what suits best for you
that actually works perfectly, i just need to adjust my footer as it's tripled in height
ill mess around with it, for some reason the bottom project still seems to just be squished, cant figure it out really, ill do some breaking and see
(fixed, was a class issue)