Centering the items

Community feedback

• 

  Daniel 🛸•44,310

  @danielmrz-devPosted 10 months ago

  Hello @KhDyanne!

  Your project looks great!

  • Using margin is not the best option to center an element. Here's a very efficient (and better) way to place an element in the middle of the page both vertically and horizontally:

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

  body {
      min-height: 100vh;
      display: flex;  /* it works with grid too  */
      justify-content: center;
      align-items: center;
  }
  

  I hope it helps!

  Other than that, great job!

  Marked as helpful

  1
• 

  Marcos Travaglini•4,840

  @BlackpachamamePosted 10 months ago

  📌 Some accessibility and semantics recommendations for your HTML

  • To improve the semantics of your HTML, you can change your <div class="container"> to a <main class="container"> and the <div class="attribution"> to a <footer class="attribution">
  • The attribution should go outside the main

  📌 Some suggestions

  • Add a padding to generate interior space on your card. This prevents you from using margin or padding on child elements to achieve the same result
  • Use min-height and max-width, this will help the content stretch or shrink if you need to. Unlike height and width which can cause your content to be cut off on certain screens. For example, use min-height: 100vh instead of height: 100vh
  • Apply max-width: 100% to your img so that it occupies the correct width within the container
  • I think that the img of the banner does not occupy the corresponding width because you applied a height: 370px, at least on desktop screens, this causes the borders to not be seen correctly. To solve it, you could leave the height: auto, add max-width: 100%
  • Instead of using margin to center your content in the center of the screen, you can use the flexbox properties in the body:

  body {
      background-color: rgb(223, 223, 237);
      /* margin: 15% auto 15% auto; */
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      gap: 20px; /* Separate the main from the footer */
  }
  

  • Correct and add the following to your card class:

  .card {
       min-height: 400px;
       max-width: 320px;
       padding: 16px;
       text-align: center;
       background-color: white;
       box-shadow: 2px 2px 2px 1px rgb(0 0 0 / 20%);
  }
  
  h4 {
       /* padding: 0 10px 0 10px; */
       margin-block: 15px;
       color: rgb(18, 18, 77);
       font-weight: bold;
       font-size: 23px;
  }
  

  Marked as helpful

  1