How can I compress the space underneath the element in the first column and first row

Hi everyone! I'm trying to recreate a small demo of a functionality where there's a navigational tab menu and each below that and also a small card that should be sticky while scrolling down. I have two problems that I'm struggling to solve: 1. Is there a way to remove the excess space below the first element (the one where I draw a red line). I think it's taking an extra space below cause of the sticky card to equal it in height (grid sizing algorithm I guess) 2. When I scroll I want the sticky card to not be stacked on top of the navbar, but rather I want them to be sticky but not overlay one another. Here I'll leave a codepen I made: https://codepen.io/fracav99/pen/QWejpqE?editors=1100 Sorry but english is not my primary language, so if something's not clear, don't hesitate to ask. Thanks in advance for your time! 🙂
No description
2 Replies
Chris Bolson
Chris Bolson•2mo ago
As you say, the height is being casued by the content in the second column. In my opinion the simplest solution here would be to place the left-hand column "sections" in their own wrapper which would place them all in the first column. As for the sticky card, if you don't want it to "stick" on top of the nav, you will need to modify it's top position to take into account the height of the nav. The issue here is that your nav height isn't defined so either you can use a magic number (3.3em seems to work well) or you may need to define the height of the nav and use that fixed value to calculate the top position. Ah, you may also need to add align-self: start; to the sticky card as otherwise it will stretch to the full height of the left-hand column.
FryBlaster
FryBlasterOP•2mo ago
Hi @Chris, thanks for your help! 🙂 I'll try and let you know
Want results from more Discord servers?
Add your server