Results Summary Component

Community feedback

• 

  ThanHtike（テンタイ）•110

  @CGM-ThanHtike

  Posted about 2 years ago

  Hello @Gabriel-H502 I reviewed ur code and here's my suggestions

  • It's a good practice to put your style.css at the lowest level in head tag bcoz u might have conflict in future like when u use bootstrap etc.
  • using fixed width is not good for responsive.
  • don't use !important like these, unless it's really necessary, it can cause unnecessary problems in large projects as far as I concerned. width: 200px !important; height: 200px !important; margin: 30px !important;
  • using rem on font-size is a better approach I think, I'm recommend to read this article for more info about rem and em. The Surprising Truth About Pixels and Accessibility
  • And for the design approach, you should make those spacing same as design file (ur card looks short bcoz of lacking space)
  • As you use display flex on your .results container, you can use gap property in it, (put like gap: 20px) and it looks much better.
  • Last but not least, instead of using margins to center ur card (as it's not good for responsive), use these instead
  • in ur body tag display: grid; place-content: center; min-height: 100vh;

  I hope these tips might help

  11

  Marked as helpful