Preview-Card-Component

Community feedback

• 

  Mohammed Lahboub•570

  @mohammedlahboubPosted over 2 years ago

  Hi @ your soloution need some tweaks , The most important is to center the card horizontally and vertically you can do it like with this:

  .body{  
  width: 100vw;  to make body width equal to screen width
  height: 100vh;  to make body height equal to screen height
  display: flex;  set display mode for body as flex
  align-items: center;  to center items inside the body vertically
  justify-content: center;   to center items inside the body horizontally
  }
  

  more on display flex

  hope this helps !

  Marked as helpful

  0

  ---

  

  Hasan Abdirahman•130

  @HasanAbdirahmanPosted over 2 years ago

  @mohammedlahboub Hi brother I was wondering why I am putting display: flex; on the body. I can see it is working and centering on vscode but not on github and logically to me it does not make sense since I was margin: auto;. and the font family that I am using is the same as the style design but again is different. and last question I have is on the report on this page they are saying I have this problems : Document should have one main landmark and All page content should be contained by landmarks... what does that mean? I would appreciate your response. Thank you.

  0

  

  Mohammed Lahboub•570

  @mohammedlahboubPosted over 2 years ago

  @HasanAbdirahman

  1-(Document should have one main landmark) means that all your html element should me wrapped inside one of these ( <header>, <nav>, <main> and <footer> ) you could replace the <section class=" wholePart " ></section> with <main class=" wholePart " ></main>

  2-you forgot to add height :100vh & width:100vw so display flex can center elements inside the body

  replace the max-with:1500px to max-width:100vw I explained it in the previous comment

  0
• 

  Abdelrahman Khaled•280

  @Abdelrahman0KhaledPosted over 2 years ago

  This comment was deleted over 1 year ago

  0

  ---

  

  Hasan Abdirahman•130

  @HasanAbdirahmanPosted over 2 years ago

  @Abdelrahman0Khaled Hi brother I was wondering why I am putting display: flex; on the body. I can see it is working and centering on vscode but not on github and logically to me it does not make sense since I was margin: auto;.. and the font family that I am using is the same as the style design but again is different. and last question I have is on the report on this page they are saying I have this problems : Document should have one main landmark and All page content should be contained by landmarks... what does that mean? I would appreciate your response. Thank you.

  0