3-column preview card component

Community feedback

• 

  Ricky•470

  @pyaetheiNPosted over 2 years ago

  Hey there! I want to help you but I can't access your github repository. Make sure you fixed that right so that I can see your codes and help you.

  Marked as helpful

  0

  ---

  

  Rolly Castillo•190

  @Pomz010Posted over 2 years ago

  @pyaetheiN Hi! This is the new link for the 3-column-preview-card https://pomz010.github.io/preview-card . I used sass to minify the project though, but I did not include the sass file on my repo lol(Noob moves there)! I'll be submitting other challenges in the future though, may be you can check it out and leave a feedback. I appreciate your interest to help.

  0

  

  Ricky•470

  @pyaetheiNPosted over 2 years ago

  @Pomz010 I took a look into your solution, great job on this challenge!

  However you need to make a few changes, you should apply

  • display: grid;
  • align-items: center;
  • justify-content: center
  • grid-template-columns: repeat(3, 1fr) inside the <main> tag because right now, you're aligning items ( both main and footer ) to the center in y-axis which doesn't look good.

  1. I noticed you wrote grid-template-columns: repeat(4, 1fr) but there's only three child containers so I suggest you change it to 3.

  2. Another thing is that align-items: center; only works when you mention height property so add height: 100vh; inside <main> tag too. You don't need to add height inside a child container but as a parent container <main> tag needs a height property for align-items: center; to work.

  Overall, great job completing the challenge! I hope my feedback helps you.

  Marked as helpful

  1

  

  Rolly Castillo•190

  @Pomz010Posted over 2 years ago

  @pyaetheiN Hi! Thank you for your feedback. I'll be checking all the issues you have mentioned here. Much appreciated!

  0