Responsive product preview card component using flexbox

Community feedback

• 

  Daniel 🛸•44,310

  @danielmrz-devPosted 7 months ago

  Hello there!

  Congrats on completing the challenge! ✅

  Your project is looking fantastic!

  I'd like to suggest a way to make it even better:

  • Using margin and/or padding isn't always the most effective method for centering an element.

  Here's a highly efficient approach to position an element at the center of the page both vertically and horizontally:

  📌 Apply this CSS to the body (avoid using position or margins in order to work correctly):

  body {
      min-height: 100vh;
      display: flex; 
      justify-content: center;
      align-items: center;
  }
  

  I hope you find this helpful!

  Keep up the excellent work!

  Marked as helpful

  1
• 

  JuvoGenesis👾•2,010

  @AkoToSiJeromeEhPosted 7 months ago

  Hey ! Great work out there i just notice that you are using margin in order to center the card component but does seem work , i suggest that you can use display : flex to center the card component since you are using it on .product , you can add d-flex on body with its related properties and also a height for proper alignment by adding that on body you can vertically and horizontally aligned the card component . that's all happy coding !

  you can see the difference when you inspect and zoom-in and zoom-out , notice that the card will behave on its position by adding those properties in body.

  body {
    background-color: #f2ebe3;
    background-color: var(--background-color);
    font-family: Montserrat,sans-serif;
    font-family: var(--primary-font);
    font-size: 16px;
    font-size: var(--default-font-size);
    display: flex; // add this
    flex-direction: column; // add this
    align-items: center; // add this
    justify-content: center; // add this
    min-height: 100vh; // add this
  }
  

    main {
      padding: 10.9375rem 0 0; // remove this
    }
  }
  

  Marked as helpful

  1