Product preview card component

Community feedback

• 

  Klara•270

  @klara367Posted about 2 years ago

  Hi Fortune,

  I had the same problem in my latest challenge. I find out, that the white space under div is because img has a display value of inline. If you change it to display: block it should solve the problem.

  You can check it out here and here.

  Hope that will help :)

  Marked as helpful

  0
• 

  Elaine•11,400

  @elaineleungPosted about 2 years ago

  Hi Fortune, I think you did a great job here! About the white border, I'm not sure what you mean, but if you're talking about the white space that appears when you resize the window and make it smaller, you can get rid of that by adding height: 100% and object-fit: cover to the image. You can also try adding a bit of margin around the component so that there's some spacing around it when it's being resized to a smaller size.

  My only comment here is, in the star selector, you have both the secondary and primary font families. That doesn't actually add the font families into all your elements; what is happening here is, you had font-family: "Fraunces", serif; listed first, and so every element would be in the Fraunces font, but then you followed that line with font-family: "Montserrat", sans-serif; which overwrites the font family before that as if it was not there. Generally, there should not be repeated properties in a selector (meaning that font family here should not be repeated), and also, the primary font family should go in the body selector usually, not the star selector. The secondary font family can be added to the various places that need it.

  By the way, I notice that you started with the desktop view first in your solution. See whether you can try a mobile first approach in later projects and compare the difference. Anyway, great work over all, and good luck in fixing the white border!

  Marked as helpful

  0

  ---

  

  Fortune Nwikina•40

  @meesuaPosted about 2 years ago

  @elaineleung Hi Elaine, thank you for the review and feedback. I have noted all corrections here, I will apply them ASAP and also going forward.

  1