Product preview card component

Community feedback

• 

  hitmorecode•6,250

  @hitmorecodePosted over 1 year ago

  If you remove margin: auto and margin-top: 1.5rem, the card will be placed in the middle of the page, because you are already using flexbox on the body, that in combination with min-heigh: 100vh is going to place the middle.

  Your card is not responsive, you can do this by using flex-direction: column;.

  main {
  max-width: 500px;
  background-color: var(--White);
  display: flex; /* Change grid to flex */
  /* flex-wrap: wrap; Enable wrapping for responsive layout */
  justify-content: center; /* Horizontally center the content */
  /* gap: 2rem; Add a gap between .product and .description */
  box-shadow: 0 0.5rem 2rem 0 rgba(0, 0, 0, 0.1);
  /*     margin: auto; */
  /*     margin-top: 1.5rem; */
  border-radius: 10px;
  overflow: hidden;
  }
  

  Marked as helpful

  1

  ---

  

  EL GABOURI Saad•150

  @wetas2020Posted over 1 year ago

  @hitmorecode I will try it, thank you for your remark

  0