Product preview card component solution - HTML and CSS

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello @italoregis, Congratulations on completing this challenge!

  Your solution its almost done and I’ve some tips to help you to improve it:

  2.Its not so good that you used overflow: hidden for the whole content, in this case this property is making the content get cropped when the component gets tiny. Instead of using overflow to make the rounded borders use border-radius for each card.

  2.A best practice to have all the image inside the container scaling and respecting the size of the container, you need to add max-width: 100% and add alsoobject-fit: cover to make the image auto-crop when resizing inside the column:

  img {
      display: block;
      object-fit: cover;
      max-width: 100%;
  }
  

  👨‍💻Here's my solution for this challenge if you wants to see how I build it: https://www.frontendmentor.io/solutions/product-preview-card-vanilla-css-and-custom-hover-state-on-hero-85A1JsueD1

  ✌️ I hope this helps you and happy coding!

  0

  ---

  

  Italo Régis•20

  @italoregisPosted about 2 years ago

  @correlucas Thanks a lot for the tip. I will keep that in mind. :)

  0