Advice generator app

Community feedback

• 

  argel omnes•1,800

  @argelomnesPosted over 2 years ago

  Hi @sahil899,

  I think one way to optimize this is to not use font-awesome at all.

  • Even though you only used it on 2 elements, browsers still need to load the whole library.
  • The images to be used are provided in starter file

  Here’s how that centering works:

  top: 50%; left: 50%; 50% here pertains to the viewport's dimension. So if the viewport is 980px wide, the card is moved 490px from the left. You may have expected the card to be centered already with this, but it's not. That's because the distance is between the viewport's edge and the card's top-left corner.

  This is where transform: translate(-50%, -50%); comes in. 50% here pertains to the card's dimension and starts at its center. If the card is 350px wide, it's moved back 175px.. from its center.

  Marked as helpful

  2

  ---

  

  Sahil Sharma•110

  @sahil899Posted over 2 years ago

  @argelomnes Thanks for the answer.

  0
• 

  Muhammad Naufal Farras•270

  @naufalf25Posted over 2 years ago

  Hello, for centering your card. You can using flexbox or grid Example :

  Using flexbox : display: flex; justify-content: center; align-items: center; min-height: 100vh;

  Or you can using grid : display: grid; align-content: center;

  I hope my feedback can help you to improve your skills 😄

  0