Responsive Preview Card Component Using Flexbox

Community feedback

• 

  Travolgi 🍕•31,400

  @denieldenPosted over 2 years ago

  Hi Shamil, great work on this challenge! 😉

  Here are a few tips for improve your code:

  • Tip of graphic design: with font-family:" Big Shoulders Display ", cursive the browser will use the Comics Sans font when it doesn't find the first font indicated (you can seen during loading)... for the designer it's a really awful font! I would rather replace it with a font-family:" Big Shoulders Display ", sans-serif much more similar to the primary font.
  • remove all margin from main .card class because with flex they are superfluous
  • add transition on the element with hover effect
  • instead of using px use relative units of measurement like rem -> read here

  Overall you did well 😁 Hope this help!

  Marked as helpful

  0

  ---

  

  Shamil ussain c•70

  @shamilussaincPosted over 2 years ago

  Hey @denielden , thank you for your feedback!

  I have added transition to button hover. it's much better now 😊. I haven't noticed the font problem before. 'cursive' looks so different in Firefox from chrome. so i chooses 'sans-serif' as secondary as you said.

  I have used margin for .card class to make card component suitable for mobile view. I think it's necessary for preventing component from touching screen edges. I would like to know your opinion about my approach on this.

  your feedback is helpful to me. thankyou😊

  1

  

  Travolgi 🍕•31,400

  @denieldenPosted over 2 years ago

  @shamilussainc In the cabinet I would have put some padding on the edges of the body ... but that's okay as you did :) happy coding!

  0
• 

  T

  Grace•31,270

  @grace-snowPosted over 2 years ago

  Hello

  You have one big problem here - nesting css selectors. This is a common mistake when people first start using scss and results in hideously specific css selectors that will cause huge problems as you move to larger projects

  The css compiled from scss should be exactly as if you wrote it directly. Single class selectors as much as possible

  I recommend only nesting things thay belong to a class like

  • media queries
  • pseudo elements like :before
  • pseudo states like :hover

  Don't nest anything else

  1