I am currently working on developing a sleek and modern landing page with multiple sections, each designed to catch the eye. This style is all the rage at the moment, featuring large headers, ample padding, bold text, and a visually appealing divider between each section.
My main challenge lies in figuring out how to position the dynamic cards effectively. These cards adjust in size based on factors like viewport dimensions and content length.
[![enter image description here][1]][1]
Thus far, I've managed to achieve a similar effect by estimating the card size (around 200px) and offsetting the top of the card by -200px. While it works on my screen, I know this approach won't translate well across different devices, fonts, or zoom levels. Additionally, I'm struggling with unwanted white space beneath the cards due to the parent container div being calculated without considering this extra space.
Is there a way to ensure that the cards are consistently centered? How can I avoid excessive white space under them? Your insights would be greatly appreciated! Thanks!!
<div className="bg-tertiary text-white text-center pb-10">
<div className="bg-secondary pb-[100px] px-10">
<h1 className="uppercase font-black text-2xl tracking-wider pt-10 pb-10 italic">HEADER TEXT</h1>
</div>
<div className="relative columns-4 top-[-100px] px-10">
<MainSectionCard />
<MainSectionCard />
<MainSectionCard />
<MainSectionCard />
</div>
</div>
edit: Credit goes to @wongjn for the helpful solution!