Product Preview Card

Community feedback

• 

  KapteynUniverse•1,600

  @KapteynUniversePosted 18 days ago

  Hey, nice job.

  10rem padding on the body is too much, you can use flex or grid for centering the items and remove padding.

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

  I see you used flex other places, so no need to explanation i guess. Also remove transform: translate(50%, 0%); from the .card to make this work.

  I also see you gave position: relative; to the body and tried to center the card div but without position: absolute; to the .card it won't work. If you use the flex i wrote above, you don't need it, so you can delete all top:0 left:0 and transform styles.

  You can use article tag for the card div. The article tag specifies independent, self-contained content. An article should make sense on its own and it should be possible to distribute it independently from the rest of the site.

  For multiple images that change on different screen sizes, you can use picture tag

  Since add to cart will add this item to the cart on a full scale web page, maybe using a button would be better.

  Rest looks good.

  Marked as helpful

  0