3 Column Preview Card Component with custom css properties

Community feedback

• 

  Adriano•38,080

  @AdrianoEscarabotePosted almost 2 years ago

  Hello Mishael, how are you? I truly loved your project's outcome, however I have some advice that I hope you'll find useful:

  I noticed that you used a button in which case the best option would be an a, because in my head when a person clicks on a button written Read more, he is not confirming a form, or something like, it will be redirected to another page, to read more about!

  to solve this problem do this:

  <a href="/" class="btn">Learn More</a>

  To make the project more like the example layout, we can do this:

  body {
     background-color: #F2F2F2;
  }
  

  The remainder is excellent.

  I hope it's useful. 👍

  Marked as helpful

  0
• 

  Amal Karim ✅•1,290

  @amalkarimPosted almost 2 years ago

  Do you mean the cards have different height while resizing screen size? I think that's because every card has different text length, thus different height. If you want all card has the same height, remove align-items: center; from main. That removal would make all cards has the same height though different content. I recommend though, to remove min-height: 100vh; from main too, and add this style:

  body {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
  }
  

  Hope this helps. Happy coding

  Marked as helpful

  0