Sticky card stacking

Tips
1

Hi everyone,

Here is a mini tutorial on how to achieve a sticky card stacking effect using the sticky position and a little SCCS: https://www.youtube.com/watch?v=gEPHfRhGUNQ

Here is the custom CSS used in the video:

@for $i from 1 through 4 {
  .div-cbf38f2:nth-child(#{$i}n) {
    top: $i * 100px;
  }
}

Note:

  • Be sure to change the class .div-cbf38f2 to your own card’s class
  • Depending on how many cards you have, be sure to change the through x to the necessary number.
    So for example if I have 10 cards, I would write:
    from 1 through 10

Enjoy :honey_pot:

6 Likes
2

@Araminta i’m trying to reproduce this on containers inside a section but it does not work (i did change the class). I’ve tried with divs but it doesn’t work either…

3

Hello @pomilo,

I’m sorry to hear you’re experiencing trouble with this.

Unfortunately it is difficult to determine what might be going wrong, without additional information on your setup.

To investigate further, could you possibly provide temporary access?

If this is possible, for security and privacy reasons, kindly send the details using our paste website, by sharing the link generated through email to support@cwicly.com.

Please follow these steps:

  • Visit our designated paste website: https://paste.cwicly.com/
  • Input your installation details into the provided text field.
  • After entering the information, the website will generate a unique link for your submission.
  • Share this generated link with us through email.

Thank you in advance.

4

@Araminta i’m coming back to this now for an other site and i understand what did’nt work! i hadn’t toggled SCSS in the role editor!

1 Like