Product Card Solution

What are you most proud of, and what would you do differently next time?

I am most proud of learning more codes for responsiveness.

What challenges did you encounter, and how did you overcome them?

One of the challenges I encountered was making the image fit the card. I managed it by adding the display: flex property to the .product-card selector and set its width to 300px. I faced another difficulty of removing the extra space at the bottom of the card. To solve it, I added the display: block property to the .card-img selector.

.product-card {
  max-width: 600px;
  background: hsl(0, 0%, 100%);
  border-radius: 10px;
  display: flex;
  flex-direction: row;
}

.product-card .card-img {
  width: 300px;
  border-radius: 10px 0 0 10px;
  display: block;
}

.product-card .product-card_content {
  padding: 26px;
  flex: 1;
}

What specific areas of your project would you like help with?

Feedback is appreciated.