Design comparison
Solution retrospective
Hello guys,
I can't figure out why my desktop page has a huge whitespace at the bottom. I've combed through my code and still had problems figuring this out. Any help/feedback would be really helpful! Thank you.
Community feedback
- @Vincent-BoutonPosted 8 months ago
Hello Tolulope ! 👋
Explanation to your question
The reason why you have a large white space is because you used
position:absolute/relative
. Usingrelative
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 aposition:relative
on a box that's parenting all your card. And then place aposition:absolute
on your cards and playing withtop, 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! 💪
Marked as helpful0@TheTreeveloperPosted 8 months agoWow, thank you so much for your explanation. I'm definitely going to try my hands at using grid and you're right, using flex turned out painful and gave me a headache, lol. Thank you for very much@Vincent-Bouton
0 - Using
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord