Design Blog-preview Card

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted 10 months ago

  Hello there 👋. Good job on completing the challenge !

  I have one suggestion about your code that might interest you.

  • Your approach with padding is good, but to vertically center it using flexbox, you should use align-items: center;. align-items: center; aligns the items along the cross-axis, and since the default orientation is row, it centers them vertically.

    Additionally, to add spacing between flex items, you can use the gap property.

    Here's an example:

    .profile {
        display: flex;
        align-items: center;
        gap: 1rem;
    }
    
    .name {
        /* padding-top: 20px; */
        /* padding-left: 10px; */
        font-size: 20px;
    }
    

  I hope you find it useful! 😄

  Happy coding!

  Marked as helpful

  1

  ---

  

  Tri D Nguyen•20

  @tdnguyen04Posted 10 months ago

  @MelvinAguilar Wow you make it look so easy. Thank you sir! You make my day:)

  0
• 

  Daniel 🛸•44,310

  @danielmrz-devPosted 10 months ago

  Hello @tdnguyen04!

  Your project looks great!

  I noticed that you used position to place the card in the middle of the page. Here's a very efficient (and better) way to center the card:

  • Apply this to the body (in order to work properly, don't use position or margins):

  body {
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  

  I hope it helps!

  Other than that, great job!

  Marked as helpful

  0

  ---

  

  Tri D Nguyen•20

  @tdnguyen04Posted 10 months ago

  @danielmrz-dev Thank you so much. I wanted to find a way in this sense but couldn't think of it. I appreciate it!

  1