css flexbox

Community feedback

• 

  Aya Saeed•1,020

  @Aya-Saeed261Posted over 2 years ago

  Hello, @practitionerofsorts! :) congratulations on finishing the challenge! Now to fix the centering issue, wrap the card and the attribution div in a main tag and use flex box :

  <main>
    <card></card>
    <div class="attribution"></div>
  </main
  

  body{
  display: flex;
  justify-content: center;
  align-items:center;
  }
  

  and to perfectly center the card delete those styles from the card class

  transform: translateY(4em);
  margin-top: 3em;
  

  this will hopefully fix the centering issue and also the landmark accessibility issue by wrapping the whole thing in a main tag, then generate a new report.

  0

  ---

  

  promise•520

  @ugochukwuuuPosted over 2 years ago

  @Aya-Saeed261 Thank you for the reply. I did try using display flex and align-items, but it didn't work

  0
• 

  Udeh Ifeanyi•520

  @IfescohubPosted over 2 years ago

  Very great work you have done here. It looked closely like the design. Here are my observations regarding your challenge. (I'm also learning though).

  Try to add the following to your body in the CSS in order to center it well: height: 100vh; display: grid; place-items: center;

  -And also regarding your report, try to place your main card class in "main" rather than "div". Like:

  <main class="card"> You can place other divs inside this </main>

  -And lastly, your attribution class should be in a "footer" tag and not "div" tag. I believe this will help to solve the report issues. Happy coding.

  0

  ---

  

  promise•520

  @ugochukwuuuPosted over 2 years ago

  @Ifescohub thank you very much I will try it

  0