Results summary page designed using flex box

Community feedback

• 

  Ruan Figuereido•500

  @huanfsPosted 12 months ago

  i've looked at your code, i realized that you divide the code in much, much pieces unnescessary. first, to build this layout using flex-box, keep in mind, the body is already an element, that being the case, it's an element with other elements inside him. divide the code only if necessary pieces, like boxes inside other boxes, visualy, the body is one box, you can resize then using "width:100vw; height:100vh" and set it to "display:grid", now use "place-items:center" and all other pieces inside body will be in the center. after that, create another "box" using and "div","section" or "article" tag, set it to a "display:flex" and, inside him you can finally build other two boxes, and set then to "width:50%" and they will have half width of parent element created before

  1

  ---

  

  Christiana Apinoko•70

  @ShvaynePosted 12 months ago

  Thank you so much @HuanFs

  0
• 

  P

  beowulf1958•1,450

  @beowulf1958Posted 12 months ago

  Congratulations on completing the challenge.

  It looks like the problem is the centering; you might want to try a different technique to place the component in the center of the page. One way would be to use flex:

        body {
          font-family: "Hanken Grotesk", sans-serif;
  
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          min-height: 100vh;
        }
  
        .container {
          width: 40rem;
          display: flex;
        }
  

  If you remove the container styles and use flex on the body, the component will center nicely. Try it out!

  0

  ---

  

  Christiana Apinoko•70

  @ShvaynePosted 12 months ago

  Thanks so much @beowulf1958 I would definitely try that out

  0