I have a feature sections with cards stacking up on top of each other. On desktop breakpoint behavior is exactly as intended - all cards scroll into the viewport from the bottom and once they are all stacked up scroll out of the viewport to the top.
From tablet breaktpoint downward however the design is messed up as the third card scrolls out of viewport before the second one. I am sure this is an easy fix but I can’t seem to find my mistake.
Thanks in advance!
Hello Philip
This issue is happening due to cards spacing being reduced on Tablet and below screen sizes causes the Third card and the Second to behave like that, to fix this, only adjust bottom-margin on them, you can do it as follows:
-on tablet:
change the bottom-margin of the second card to be 11.5rem and on third card to be 1rem
that should give the cards the right spacing before the parent container scrolls out of view to override the the sticky positioning of the cards on that exact spacing.
check on mobile, if the first card is acting a bit weird then adjust the bottom-margin on mobile view to have the desired spacing between cards.
Hope that helps!