product-preview-card-component

Community feedback

• 

  Rajaul Islam Ratul•1,250

  @ratul0407Posted 11 months ago

  Hey there @vintech05, congrats on completing this challenge🎉🎉

  for the image you can do the following

  //this will make working with images a lot easier
  img {
  display: block;
  max-width: 100%;
  }
  
  .product_card-image {
    width: 360px;
    border-radius: 0.5em 0 0 0.5em;
  //you don't need the height and overflow properties anymore🙂
  }
  

  I hope this helps🙂🙂

  Happy coding brother🎉🎉

  Marked as helpful

  0
• 

  Uwuigbe Julius Osemwengie•380

  @Call4juliusPosted 11 months ago

  Images can be tricky to work with.

  What I now understand is that you will need to change the "FORMATTING CONTEXT". I don't know if you have heard of that phrase before?

  To do that just give the img {display: inline-flex or flex}

  This works because the default behavior of flex items is stretch. So the image will stretch to fit the container.

  0
• Account deleted

  Hey, you cah just take the parent div as reference and put same height of the image based on parent div element. You can checkout my solution

  0
• 

  Daniel 🛸•44,250

  @danielmrz-devPosted 11 months ago

  Hello @vintech05!

  Your project looks good!

  I couldn't take a look at your code. The link to your github is not working for some reason.

  About image resizinng, have you tried using the image as a section background? It is a very good way to work with images.

  I hope it helps!

  Other than that, good job!

  0