3-column preview card component / flexbox / grid / SCSS /

Community feedback

• 

  Joel Ramos•185

  @sephorusPosted over 3 years ago

  Hi Rodrigo,

  Nice work on this challenge! I just completed this one as well. I have some feedback that I think would help your solution match the design files just a little bit better:

  1. I would add some line-height to the descriptions of the cards! 30px seemed to work for me.

  2. All of the car titles (SUVs, Luxury, and Sedans) are all uppercased in the design files. Use some text-transform: uppercase; on your titles to make it match!

  3. Very small margin changes - I would add more of a margin between the button and the description, and decreased the margin between the title and the paragraph.

  4. The active states of the buttons I think have been missed. The previous comment ^ seemed to mention something about this.

  5. This is also super picky, but thought I would mention it anyway. The text on the cards in the design files looks a little bit faded. I would play around with the opacity to try and match it.

  Overall, good job! You can check mine out here if you'd like: https://sephorus.github.io/three-column-challenge/

  Marked as helpful

  0

  ---

  

  Rodrigo Alas•55

  @javieralas05Posted over 3 years ago

  @sephorus I went through all the observation you made and you're right giving a little more line-height will help to give more space in between line, making easier to read. I noticed the text after submitting.

  I'll fix the hover effect as well, and I'll play around with the opacity to match the design.

  I really appreciate you took time to go over my code and also for your suggestion. I'll be uploading a new one with this corrections. Thanks!

  0

  

  Joel Ramos•185

  @sephorusPosted over 3 years ago

  @javieralas05 No problem - happy hacking!

  0
• 

  kennedy ogaba•25

  @ogabakPosted over 3 years ago

  your card looks like the one provided and your code was readable for me, but I think you missed one part of the hover action. When you hover over the learn more button, it is supposed to inherit the color of the card it is made for. once that is implemented, I your solution would be good.

  Marked as helpful

  0

  ---

  

  Rodrigo Alas•55

  @javieralas05Posted over 3 years ago

  @ogabak Thank you, I will defenetly correct the hover effect and take for time to review the project and also to share your feedback, much appreciated.

  0
• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 3 years ago

  👋Hi Rodrigo Alas!

  For styling I recommend to use classes for everything rather than using id, since it will increase the specificity unnecessarily.

  Use id for navigation of the page instead. Like to move down to a certain part of your page.

  <a href="#article">Read More</a>
  

  That's it! Hopefully this little tip might be useful for you!

  0