Product preview card component using CSS

Community feedback

• 

  Larra•10

  @larrasuPosted almost 2 years ago

  Hello! Your solution looks excellent overall!

  A few things you might want to add are the rounded corners of the card component and add overflow: hidden so the image molds into the rounded corners.

  To answer your questions:

  1. You can vertically center a span element by adding Flexbox to the parent element like this:

  display: flex;
  items-align: center;
  

  2. Yes, it is possible to set the height of the div the same as the background image by adding background-size: cover to your div. If you are using an img element, you can also do it by adding object-fit: cover to your img element.

  I hope this helps! Happy coding ✨

  0