stats preview card component

Community feedback

• 

  Marcos Travaglini•4,840

  @BlackpachamamePosted 10 months ago

  Greetings! you have done a great job 😎

  📌 Some accessibility and semantics recommendations for your HTML

  • To improve the semantics of your HTML, you can change your <div class="attribution"> to a <footer class="attribution">
  • The attribution should go outside the main
  • In your styles, you have put Body instead of body. In theory, this has no effect, but it is preferable for it to be body

  📌 Some suggestions

  • You can use object-fit: cover in your img, this will make the image fill the entire container maintaining its aspect ratio. More info
  • If your parent-container already has a margin, the padding of your body is unnecessary
  • Instead of using margin to center your content in the center of the screen, you can use the flexbox properties in the body:

  body {
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 15px;
      font-family: var(--main-font);
      font-weight: var(--main-font-weight);
      background-color: var(--Very-dark-blue);
      /* padding: 3rem; */
      flex-direction: column;
      gap: 20px; /* Separate the main from the footer */
  }
  

  • With these changes you no longer need a margin-bottom in your parent-container nor a margin-top in the footer

  Marked as helpful

  0
• 

  beniusis•400

  @beniusisPosted 10 months ago

  Hey 👋 Good job on finishing the challenge! To answer your question, you can switch body property height: 100% to min-height: 100vh to center the component.

  Marked as helpful

  0

  ---

  

  Aymen developer•620

  @aymenthedeveloperPosted 10 months ago

  @beniusis i usually set the height to 100vh directly but i guess your suggestion is better, since it will not limit the height of the page to only 100vh if we add more content

  Marked as helpful

  1
• 

  Daniel 🛸•44,310

  @danielmrz-devPosted 10 months ago

  Hello @J3r3mia!

  Your project looks great!

  Here's how you center the card:

  • Apply this to the body (in order to work properly, don't use position or margins):

  body {
      min-height: 100vh;       /*  don't use 100%, use 100vh  */
      display: flex;
      justify-content: center;
      align-items: center;
  }
  

  I hope it helps!

  Other than that, great job!

  0