Dynamic Height - Group Spacing

On my page, I have a menu that scrolls to the correct section. I would like to add spacing below the final section so that when a user scrolls to the section, the section appears at the top of the screen.

Ideal Scenario:

Current Scenario:

Any idea how to add dynamic spacing / padding below this last group?

Can’t you just add a bottom margin?

1 Like

I have 40px of bottom padding, but that doesn’t fix the issue of scrolling so the final group appears at the top of the screen.

Then cant you just make the page bigger?

Not if I want to make the page responsive. I want the spacing to be responsive to viewport height and the height of the last group.

You could alternatively have 2 more tabs on the page (tab#1: Ingredient / tab#2:Direction) that displays the option chosen and hides the option that wasn’t chosen. That way, things stick to the top of the page like you want it to