QR code flexbox update

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hi @Alfo-code, congratulations on your first solution!👋 Welcome to the Frontend Mentor Coding Community!

  Great solution and a great start! From what I saw you’re on the right track. I’ve few suggestions for you that you can consider adding to your code:

  Your component is okay but it's missing the vertical alignment. The best way to do it is by using flexbox. The 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) aligns the body and then use the flex properties for alignment with display: flex / align-items: center; / justify-content: center;. If you're using the attribution you need to add flex-direction: column to make the attribution stays under the QR Code component. See the code below:

  body {
      min-height: 100vh;
      background-color: hsl(212, 45%, 89%);
      font-family: 'Outfit', sans-serif;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
  }
  

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  0
• 

  pradeep•30

  @pradeep0712Posted about 2 years ago

  you have done a good job bro.....try improving it further

  0