product_preview card

Hello @04leslie, Congratulations on completing this challenge.🎉

• When I looked at the code I found that you have put the image in a div called card-image, although you set the image to height: 100%, the image will consume 100% of it's direct parent which is the div with class of card-image, while it's direct parent is not set to height: 100% of it's direct parent which is the div with class of card.

• As for the font, you have imported different font weights than those specified in the style-guide, for Fraunces it's weight is 700 while for Montserrat it's weights are 500 and 700.

• You can also use colors that are the same as the design which will help a lot, there are tools like Instant Eyedropper which you can use to get the exact color of the text by hovering over the design image.

I hope this was helpful, and always remember practice makes perfect.😊

Happy Coding

Hi leslie! ✨ you could try to add this => overflow:hidden to .card-image .img { ... }

The approach I took on my project was for the .card { max-width: 600px } and went on to .card-image .img{ width: 100%} .card-info {width: 100%} and just made up for the remaining space with padding, and margin.

I found this video very helpful for understanding responsiveness. https://www.youtube.com/watch?v=VQraviuwbzU Hope it helps :)