Community X.

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

Jun 11

Consistent Proportional Vertical Spacing Across Screen Sizes?

Does anyone have any tips and tricks for achieving consistent vertical spacing across various screen sizes? I would like to be able to use the full height of the viewport, with my elements retaining their proportional vertical spacing across any screen size. For example a title at the top, some text at the middle and some buttons near the bottom, all retaining their relative vertical distance from each other regardless of screen height (with differences across breakpoints for laptop/tablet/mobile, of course). I've tried using % spacing, but given it is always % of width not height I get unreliable results. I'm probably missing something really obvious, or overthinking it. Thanks for any advice!

2
Best Answer
Jun 11

If I understand correctly, I would set section to 100vh and then add 3 row grid with the heights set to required fractions (fr). Then, when you add the elements to each row set the docking distances and text min/max size. Hope this helps and I am not misunderstanding your question!

1
Jun 11

Thanks Janet. That makes sense. I will give it a try and let you know. Much appreciated!

1
Jun 12

Worked great, thanks again Janet. Should have figured that one out myself!