3-Column preview card component / Flexbox

Community feedback

• 

  P

  Patrick•14,265

  @palgrammingPosted over 3 years ago

  Looks Good! ⭐⭐⭐⭐⭐

  Marked as helpful

  0
• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 3 years ago

  👋Hi Yohan-Marques! My name is Vanza!

  I have some feedback on this solution:

  • Let's take a look on a chunk of your css code, so for the width: 100% auto;, it's not valid since width can only accept 1 value.

  body {
    height: 100vh;
    width: 100% auto;
  }
  

  • Try to use rem unit, it will allow the user to change the font-size base on their setting.
  • Now, let's take a look on another chunk of your css:

  h1{
      margin: 25px 30px 20px 50px;
  }
  h1{
      font-size: 40px;
      text-transform: uppercase;
      font-family:Big Shoulders Display;
  }
  

  • So,. first you can just make it into 1 h1 styling like this:

  h1{
      margin: 25px 30px 20px 50px;
      font-size: 40px;
      text-transform: uppercase;
      font-family: "Big Shoulders Display", sans-serif;
  }
  

  • Second, try to add quotation marks if the font-family name require space.
  • Third, don't use h1, p, and button by adding margin to them to make the card looks good, instead try to add padding into the card.
  • Try to add grayish background on your body style, to make it looks closer to the design.

  That's it! Hopefully this is helpful!

  Happy Coding!

  2