3-column preview card component challenge

Community feedback

• 

  Anosha Ahmed•9,300

  @anoshaahmedPosted almost 3 years ago

  To avoid accessibility issues in the future, try to always have <h1> in your code.

  Marked as helpful

  0
• 

  Dusvy_M•390

  @dovelmPosted almost 3 years ago

  Okay @azizbna thanks to you

  0
• 

  Dusvy_M•390

  @dovelmPosted almost 3 years ago

  I can use margin-top in buttom for mobile view

  0

  ---

  

  AzeezBNA•70

  @azizbnaPosted almost 3 years ago

  @dusvimarin Hello! I appreciate you taking your time to write this comment. I used display:flex to center the component on the <main> element and for some reason, no matter what I do I can't get it to not stick to the bottom of the page when in mobile view, I'll look for a better solution to center the <div> in the future, Thank you!

  0

  

  Anosha Ahmed•9,300

  @anoshaahmedPosted almost 3 years ago

  @azizbna Hey, in your code, if you give your <main> a height, for example of 1400px, and your .container a height of calc(420px * 3) (because each of the coloured boxes are 420px in height), then you will be able to make it centered.

  You always need a height for align-items to work.

  Marked as helpful

  1

  

  AzeezBNA•70

  @azizbnaPosted almost 3 years ago

  @anoshaahmed Thank you so much for the tip, I was able to get it to work after a bit of fiddling around with some flex properties, align-content: space-between; and a margin-top60px seems to have done the trick!

  1