flexbox - border box

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted over 1 year ago

  Hello there 👋. Good job on completing the challenge !

  • In your case, you've set the .container as the Flex container, but haven't defined its height. Without a defined height, Flexbox can't determine where the center is for the vertical alignment (align-items: center). That's why it doesn't appear centered.

    To fix this, try setting a height for the .container. Typically, you might use min-height: 100vh to make it span the full height of the viewport:

    .container {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      min-height: 100vh; /* Add this line to center vertically */
    }
    

  • Next, you should remove the position: absolute and top: 11% from .qr. With the above Flexbox setup, these are no longer needed for centering:

    .qr {
      ...
      /* position: absolute; */
      /* top: 11%;*/
    }
    

  I hope you find it useful! 😄

  Happy coding!

  Marked as helpful

  2

  ---

  

  saina-s•30

  @saina-sPosted over 1 year ago

  @MelvinAguilar WOWW! Thanks a lot I've gotten stuck there

  1
• 

  Rowan•210

  @rowanDeveloperPosted over 1 year ago

  Hey Saina's! Great that you are joining the FrontEnd Mentor community! Plus good job on your first challenge.

  Some advice tho, is that I would put everything regarding styles to a stylesheet (like in your case you named it "challenge.css") instead of having styles attributes in the index.html document. I think it will help your code be more consistent and also help you with "parent" and "child" elements on your stylesheet approach.

  I am also curious on what is the solution to align vertically your div container, because on what I can see on your code you are using "justify-content: center" and "align-items: center" on your div which should work.

  Let me know the solution on that when you find out.

  Marked as helpful

  0

  ---

  

  Muhaddis Rehman•100

  @MuhaddisRehmanPosted over 1 year ago

  @rowanDeveloper

  It was because of the parent height.

  align-items center is working but the component isn't in the center of the whole viewport because the parent doesn't cover the whole viewport which can be solved by giving it min-width:100vh;

  Marked as helpful

  2

  

  saina-s•30

  @saina-sPosted over 1 year ago

  @MuhaddisRehman Yes, that was the reason I think. Thank you guys @rowanDeveloper and @MuhaddisRehman

  0