Product Preview Card Component (HTML, CSS)

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  👾Hello Rizky, congratulations for your solution!

  In this case you don't need to use overflow: hidden I saw that you've used it to have the image bordes rounded, but you can simply add the border-radius to the top-left and left borders.

  The overflow basically hide some information that is to big to fit a container, the behavior is similar to the object-fit you've used for the image.

  Delete the overflow: hidden because this can start to crop your text content when your component scales down. See the border-radius fixes to your image:

  .preview__image {
      height: 100%;
      width: 100%;
      object-fit: cover;
      border-radius: 0.75rem 0 0 0.75rem;
  }
  

  More info about overflow: https://www.w3schools.com/css/css_overflow.asp

  Hope it helps you bro!

  Marked as helpful

  1

  ---

  

  Rizky Ardiansyah•160

  @arudiansahaPosted over 2 years ago

  @correlucas Thanks for the help! :)

  1