Kevin Powell - Community•7mo ago

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/

Callum

CodePen

VwgrOZV

...

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

MarkBoots•7mo ago

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

CDL•7mo ago

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)

CDL•7mo ago

ah great this explains it better https://codepen.io/Laing91/pen/VwgrOZV i believe the issue is the faint-line is uhh.. silly.

Callum

CodePen

VwgrOZV

...

CDL•7mo ago

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

MarkBoots•7mo ago

other option is to set

.projects-grid{
  display: grid;
  gap: 300px; /* spacing between items */
  padding-block: 100px /*spacing top and bottom/* or margin-block (depends on what you want)
}

.projects-grid{
  display: grid;
  gap: 300px; /* spacing between items */
  padding-block: 100px /*spacing top and bottom/* or margin-block (depends on what you want)
}

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

CDL•7mo ago

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

CDL•7mo ago

CDL•7mo ago

(fixed, was a class issue)

Gaming

Programming

Scroll snapping/div spacing when scrolling