Responsive component page with css

Hello Tolulope ! 👋

Explanation to your question

The reason why you have a large white space is because you used position:absolute/relative. Using relative will not remove the allocated space the box should take and so, once moved to the space YOU want, the big white space will stay.

Solutions

Yes SOLUTIONS with S, there are a huge amount of solutions.

• Using position:absolute/relative

if you really want to use position:absolute/relative you might want to place a position:relative on a box that's parenting all your card. And then place a position:absolute on your cards and playing with top, right, bottom, left. Altough I do not recommend this solution since in can be painfull to make it responsive for all type of device.

• Using display:grid

I cannot explain to you in details here but, display:grid is for me the best solution for your challenge. You can allocate space and rearange the way you want easely with simple CSS code.

• Using display:flex

it's doable but can be a little painfull to do, and using more <div> to create container for each row, etc. Not recommended but doable.

• And I'm sure there are more

Hope it helped! Keep the good work! 💪