Community X.

Connect with other creators, share ideas, give feedback and get the latest product updates.

Jan 31

How to make stack/items alway visable within sticky section/layout set to max 100 vh without the items dissapearing under the next section?

Hello, despite checking the lessons and slowly but surely getting into Editor X, I still haven't figured out how to make sure items does not disappear under the next section when set the previous section to sticky scroll behaviour and with a max vh of 100. It works fine for smaller devices such as phone or tablet, but on desktop, the stack elements are not all visible as shown on the image below. Please can somebody help me with this issue? Thanks a lot!


1 answer0 replies
1

Hey Eloisa, I saw your site, very cool use of sticky :)

When setting elements/sections to sticky they also go to in front of other sibling elements in the Z axis.


Because you set all the sections to be sticky, to achieve that cool "card stacking" effect, each section will go over the previous one, so that is expected.


My hunch is that the text and image you are using have a combined height which is grater than 100vh so it overflows the section it's inside of.


So your options are either to change sizing or make them relative to the height of the view port as well, to make sure it does not overflow, or to make the section taller than 100vh, but that will not look so good with the "card stacking" effect.

Editor X

Design your boldest creations.