Responsive cart parfume with flexbox and media queries

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello @msiesse, Congratulations on completing this challenge!

  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 {
      display: flex;
      min-height: 100vh;
      background-color: hsl(30, 38%, 92%);
      flex-direction: column;
      align-items: center;
      justify-content: center;
  }
  

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  0
• 

  Adriano•38,390

  @AdrianoEscarabotePosted about 2 years ago

  Hi msiesse, how are you?

  I really liked the result of your project, but I have some tips that I think you will like:

  To obtain a better centralization of the content, we can do it this way:

  I added:

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

  If you have any questions, answer this comment and I'll explain better!!

  The rest is great!!

  Hope it helps...👍

  Marked as helpful

  0