product_preview card

Community feedback

• 

  AbdulMajeed•330

  @AbdelmigedPosted over 1 year ago

  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

  Marked as helpful

  0
• 

  Francisco•210

  @jesusfrancisco88Posted over 1 year ago

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

  0
• 

  denise•230

  @moncadadPosted over 1 year ago

  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 :)

  0