Product preview

Community feedback

• 

  Elaine•11,400

  @elaineleungPosted about 2 years ago

  Hi Eliabe, welcome to Frontend Mentor, and great job working on this challenge, as it looks really good! 😊

  One suggestion I have is to use height: 100% for #image instead of the fixed pixel height you have; the reason is, in mobile view when I resize the browser and make the width smaller than 300px (I wasn't intentionally trying to do this, more of an accident but led me to discover this), the image separates from the text, and using height: 100% can keep that from happening here. You can also add a display: block to your img to remove that tiny almost 1px spacing that's underneath the image, which occurs due to img being an inline element and thus have properties like line height. Well done on the whole!

  Marked as helpful

  1

  ---

  

  Eliabe•200

  @eliabedasilvaPosted about 2 years ago

  @elaineleung I also encountered this problem of the image separating from the text, but I had no idea how to solve it. Thanks for the guidance.

  0
• 

  Kenbak•40

  @KenbakPosted about 2 years ago

  Congrats on your first challenge ser. It's very impressive. The card is the exact same size.

  Instead on using margin top and bottom on the texts elements, I would put them all in a div, using flex and flex-column. Then add a justify-content-around and it should do the trick and be more symmetrical!

  Also you can reduce a bit the line height on the H1 to make it perfect ;)

  Marked as helpful

  1

  ---

  

  Eliabe•200

  @eliabedasilvaPosted about 2 years ago

  @Kenbak thanks for the guidance

  0