3-column preview card component

Community feedback

• 

  P

  Carl•1,235

  @CarlHumm

  Posted about 2 years ago

  Here you go

  Basically you're setting align-items: center on your .container element which is aligning flex-children to the center based on their height. The height of the other two columns are greater because of the paragraph text, so SUV (With less height) is centered in the middle leaving a gap at the top and bottom.

  You can read more about it from the following:

  • MDN
  • CSSTricks

  You also set width to 800px (fixed) and max-width to 90%. This looks like a typo to me as it should be the other way around. You want the width to try and be 90% but no larger than 800px.

  If you want to align the buttons you can apply a margin-top: auto to space them apart from the top content, there are other ways to do this as-well.

  _nehal has already mentioned the issue with the border.

  Other than this, good job and good luck with making changes and your next project. :)

  00

  Marked as helpful
• 

  _nehal💎•6,710

  @NehalSahu8055

  Posted about 2 years ago

  Hello Coder 👋.

  Congratulations on successfully completing the challenge! 🎉

  Few suggestions regarding design.

  • Use transparent border for no shifting of height on hovering buttons.

  .btn{   
  border: 2px solid transparent;
  }
  

  • Use background:transparent; on hovering don't use background-color specifically for each

  .btn:hover{   
  background:transparent;
  }
  

  • Use cursor:pointer for buttons for more user friendly.

  I hope you find this helpful.

  Happy coding😄

  00

  Marked as helpful