Responsive 3-column preview card component using flexbox and grid

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  Hi, Ricky! 👋

  It's great to see you completing another challenge. It's been a while since the last feedback that I gave to you. Anyway, congratulations on completing this challenge! 🎉 Nice work on this challenge! 👍

  There are two things that can be done better.

  • Firstly, use CSS to uppercase the text. The uppercased word in the HTML will be spelled by the screen reader (spelled letter by letter).
  • Secondly, I would recommend adding max-width to the main element before the layout shift into three columns. If you see the site on range 500px to 967px, the cards are becoming too wide.

  I would recommend writing the styling using the mobile-first approach next time. It often leads to shorter and better performance code. Also, mobile users won't be required to process all of the desktop styles.

  I hope this helps! Happy coding! 😁

  Marked as helpful

  1

  ---

  

  Ricky•470

  @pyaetheiNPosted over 2 years ago

  You’re right I totally missed that breakpoint, thank you @vanzasetia 😊

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @pyaetheiN No problem! 😉

  1