Responsive Card Component Using CSS Flex-Box

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello Nenkimwa, Congratulations on completing this challenge!

  Your solution its almost done and I’ve some tips to help you to improve it:

  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 {
      min-height: 100vh;
      background-image: url(images/pattern-background-desktop.svg);
      background-repeat: no-repeat;
      background-color: hsl(225, 100%, 94%);
      display: flex;
      justify-content: center;
      display: flex;
      background-size: contain;
      align-items: center;
      align-content: center;
  }
  

  Add background-size: contain; to make your background takes the full width size.

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  0

  ---

  

  Nenkimwa Kangdim•90

  @Fanuel369Posted about 2 years ago

  @correlucas Thank you so much for your feedback. I will use your recommendations.

  0
• 

  Travolgi 🍕•31,400

  @denieldenPosted about 2 years ago

  Hi Nenkimwa, congratulations on completing the challenge, great job! 😁

  Some little tips for optimizing your code:

  • to fix the size of top image add background-size: contain to body
  • use article tag instead of a simple div to the container card for improve the Accessibility
  • img element must have an alt attribute, it's very important!
  • add align-items: center to the body to center the card vertically
  • after, add min-height: 100vh to body because Flexbox aligns child items to the size of the parent container
  • instead of using px use relative units of measurement like rem -> read here

  Hope this help! Happy coding 😉

  Marked as helpful

  0

  ---

  

  Nenkimwa Kangdim•90

  @Fanuel369Posted about 2 years ago

  @denielden Thanks for your feedback. I will consider your recommendations in my design

  1

  

  Travolgi 🍕•31,400

  @denieldenPosted about 2 years ago

  @Fanuel369 You are welcome and keep it up 😁

  0