Responsive Preview Card Component Using Flexbox

Community feedback

• 

  Travolgi 🍕•31,300

  @denielden

  Posted over 3 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!

  02

  Marked as helpful
• 

  

  Grace•32,130

  @grace-snow

  Posted over 3 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

  10