Responsive component page with css

Community feedback

• 

  Vincent•190

  @Vincent-BoutonPosted 9 months ago

  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! 💪

  Marked as helpful

  0

  ---

  

  Tolulope Oluwabukunmi•240

  @TheTreeveloperPosted 9 months ago

  Wow, 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