Four card Feature section

Community feedback

• 

  Leo•440

  @SouiciaPosted over 2 years ago

  Hello Keagan,

  First of all, congratulation on completing the challenge. I think a better solution rather than using position absolute, mainly without using a relative container, it could lead to problems on a bigger site, would be to use flexbox instead. For this challenge, I would suspect a better way would be: making a main div around all four boxes and giving the attributes of display: flex; flex-direction: row; justify-content: center; align-items: center;. Then for the two middle boxes, you enclose them within another div and this div you make it as flex with flex-direction: column;

  So from your source code it would look like: /use the main tag for your main body/

  <header class="top box">rest of code... </header> <main class="main-container"> (flex-direction: row) <div class="supervisor box"<div> <div class="two-middle-boxes"> (flex-direction: column) <div class="team-builder box">rest of code...</div> <div class="karma box">rest of code</div> </div> <div class="calculator box">rest of code</div> </div>

  I hope you understand my point. If you don't, feel free to ask me. Little bonus: In your media query class "line" use align-items center for so that all the boxes are centered when resizing the window.

  Marked as helpful

  1

  ---

  

  Keagan Dickinson•160

  @PhisherFTWPosted over 2 years ago

  @Souicia This is an 'absolute'ly fantastic answer thank you, this made perfect sense, I just haven't used flexbox like this, but now that you mention it, it makes perfect sense thank you so much! I will implement this asap.

  1
• 

  Marzouq Adebayo•90

  @AdebayoMarzouqPosted over 2 years ago

  Hi Keagan. Congratulations on completing the challenge.

  A better solution would be picturing the entire section as a grid with 3 columns. The first and third columns would have just one centered card while the second column would contain two cards. i.e 1fr 1fr 1fr then use flexbox or grid in each column to place the cards inside each of the columns

  I hope this helps

  0
• 

  Manoj Kumar Singh•970

  @dev-mksinghPosted over 2 years ago

  Hey Keagen, I just completed this challenge with the help of Flexbox and Grid. It might help you in terms of Grid and using it with different layouts like Flexbox as well. If you get concern over something or you find it hard let me know. Hope it will help you.

  0