Responsive 3-column preview card component with CSS Grid and Flexbox

Community feedback

• 

  _nehal💎•6,710

  @NehalSahu8055Posted over 1 year ago

  Hello Coder 👋.

  Congratulations on successfully completing the challenge! 🎉

  Few suggestions regarding design.

  • Use responsive units(rem, em, %) from next project. Explore respective use cases on google.

  • Replace width with max-width to make your card more responsive.

  .card {
  max-width: 18rem;
  }
  

  • Every site must have one h1 element describing the main content of the page. So, Add a level-one heading instead of h2 to improve accessibility.

  I hope you find this helpful.

  Happy coding😄

  Marked as helpful

  1

  ---

  

  Helen Chong•190

  @helenclxPosted over 1 year ago

  @NehalSahu8055 Thank you for your feedback. I have added a h1 element and replace width with max-width as you suggested. I have been using responsible units in all my solutions to Frontend Mentor's challenges.

  1
• 

  Joachim•840

  @Thewatcher13Posted over 1 year ago

  • use a css reset in all your projects, look at Andy's bell website for a good and clear one
  • set rem instead of px on your min-width @media

  1

  ---

  

  Helen Chong•190

  @helenclxPosted over 1 year ago

  @Thewatcher13 Thanks for your feedback. My code for this project has been updated based on your suggestions.

  0

  

  Joachim•840

  @Thewatcher13Posted over 1 year ago

  @helenclx, very good! You should use that css reset on every project you're going to build! :)

  0