3 Column Card built with Sass

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  Awesome work on this challenge! Your solution looks great even on a mobile landscape view! It's responsive! 👏

  About the card vertical alignment, I think the issue is the padding on the main element. Try to reduce it and generate a new screenshot to see the effect.

  Some areas that can be improved.

  • Always use CSS to uppercase the text. Uppercased text in HMTL might be spelled letter by letter by screen readers (unless it is the desired effect).
  • I suggest using link elements for the Learn more buttons because I think those buttons would navigate the user to another page instead of triggering something. So, what do you think it's going to happen if the user clicks the button?

  For your information, to work easier with the img element, I highly suggest making it a block element and adding max-width: 100% because by default the img element is an inline element which makes it hard to work with.

  I hope this helps! Keep up the good work! 👍

  Marked as helpful

  1

  ---

  

  kpax10•120

  @kpax10Posted over 2 years ago

  @vanzasetia Thank you so much for this. Really great recommendations here!

  0

  

  kpax10•120

  @kpax10Posted over 2 years ago

  @vanzasetia Have you come across an issue where the github pages solution looks different than the solution frontendmentor displays? My solution looks correct on Github pages, but the solution here has the 'Learn More' buttons floating up higher in the card.

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @kpax10 You're welcome! 👍

  Sometimes the GitHub page takes more time to update the changes so if you generate a new screenshot before the new changes get updated/built then it will show a different thing on the Frontend Mentor.

  Regardless of the GitHub page issue, the "Learn More" buttons are positioned near the text (floating up higher in the card) because of the height of the card and the display: flex on the parent element. I don't think you need flexbox to align the elements inside the card. Also, never specify the height of the card elements, let the elements inside it dictate the height of the card. So, I would recommend adding some margin-top on the link element and may adjust the padding if needed.

  Marked as helpful

  0