Responsive card using HTML and CSS

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello @etherubn, Congratulations on completing this challenge!

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

  Fix the alignment of the whole content using flex and min-height to manage the vertical alignment and make everything centered.First of all put min-height: 100vh to the body to make the body display 100% of the viewport height (this makes the container align to the height size that's now 100% of the screen height) size and display: flex e flex-direction: column to align the child element (the container) vertically using the body as reference.

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

  👨‍💻Here's my solution for this challenge if you wants to see how I build it: https://www.frontendmentor.io/solutions/product-preview-card-vanilla-css-and-custom-hover-state-on-hero-85A1JsueD1

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  1

  ---

  

  Ruben Antonio Moreno Postigo•30

  @etherubnPosted about 2 years ago

  I don't understand why I need to do that to the body, I think that the only element how need to be responsive is the card. Can you explain me, please ?

  0
• 

  Nasir Mumin•70

  @Nasir222222Posted about 2 years ago

  can u try centering it with

       margin: 0 auto;
  

  or with flexbox

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  

  1
• 

  Travolgi 🍕•31,400

  @denieldenPosted about 2 years ago

  Hello Ruben, You have done a good work! 😁

  Some little tips to improve your code:

  • add main tag and wrap the card for improve the Accessibility
  • use flexbox to the body to center the card. Read here -> best flex guide
  • after, add min-height: 100vh to body because Flexbox aligns child items to the size of the parent container

  Keep learning how to code with your amazing solutions to challenges.

  Hope this help 😉 and Happy coding!

  0