Product Preview Card Component with SaSS/HTML

Community feedback

• 

  Elaine•11,400

  @elaineleungPosted about 2 years ago

  Hi Dario, great attempt here! I think you had some creative ways of solving this challenge. Some suggestions I can give you:

  1. To center the card, I would remove all the position:fixed along with the left and top as well as the transform property; in the body, I would add these lines to body:

  body {
    display: grid;
    place-content: center;
    min-height: 100vh;
  }
  

  2. It's important to use reset rules, and ones of the most important ones is the box sizing because that could determine whether things are looking right or not. I see that it has a value of inherit right now; I would change that to border-box instead.

  3. For the image, next time you can try using object-fit: cover instead, which is similar to the background-size property.

  4. Lastly, for the .card, I think you can just remove that 2rem gap and change the padding on card__info to 2rem instead!

  Marked as helpful

  0