3-column preview card component

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hi Aijalon Bode, congrats on completing this challenge!

  I saw your preview site and I liked a lot the work you’ve done here, it's almost complete, I’ve some suggestions you can consider applying to your code:

  Your component is okay but its missing the vertical alignment. The best way to do it is by using flexbox. First step is to add min-height: 100vh to make the body height size becomes 100% of the screen height, this way you make sure that whatever the situation the child element (the container) align the body and then use the flex properties for alignment with display: flex / align-items: center; / justify-content: center;

  body {
      background-color: var(--btn-white);
      position: relative;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
  }
  

  To make your CSS code easier to work you can create a single class to manage the content that is mostly the same for the 3 cards (paddings, colors, margins and etc) and another class to manage the characteristics that are different (colors and icon), this way you'll have more control over then and if you need to change something you modify only one class.

  ✌️ I hope this helps you and happy coding!

  0

  ---

  

  Aijalon Bode•70

  @capitolcomputersPosted about 2 years ago

  @correlucas thanks for the kind feedback. I do appreciate it. I'll work on improving just that.

  However, can you give me an example of the second feedback.

  Not sure I do understand how you mean, so a more explanation with perhaps an example would help me understand better.

  Would love to see an example of a single class managing the paddings, margin and colors.

  0