Results summary component

Community feedback

• 

  hitmorecode•6,250

  @hitmorecodePosted over 1 year ago

  Having a quick look at your CSS it looks good. The only thing I would change is how to write down the border-radius. I'll use the short way 😁 less writing.

  .your-result{
  display: grid;
  gap: 1.5rem;
  text-align: center;
  padding: 1.5rem 3.5625rem 2.5rem 3.5625rem ;
  border-radius: 0 0 2rem 2rem; /* top-left, top-right, bottom-right, bottom-left */
  /* border-bottom-left-radius: 2rem; */
  /* border-bottom-right-radius: 2rem; */
  background: linear-gradient(0deg, var(--clr-royal-blue) 0,  var(--clr-slate-blue) 100%);
  }
  

  I don't know if you do the same thing I used to do when working with rem. I used to always convert px to rem, so a calculator was my best friend for those moments. I've learned a nice trick to stop doing this. I don't know if you already now this trick or not, but I'll share it with you.

  /* when writing your CSS add this line to the root */
  :root {
  font-size: 62.5%;
  }
  
  /* add this to the body */
  body {
  font-size: 1.6rem;
  }
  

  This will convert rem into a 10 based system. For example if you have 28px you just write down 2.8rem and so on. Just divide the value in px by 10 and you have the value in rem

  Marked as helpful

  1

  ---

  

  newtothis90•240

  @newtothis90Posted over 1 year ago

  @hitmorecode Dude, that rem trick I did not know! Thank you so much, thats gonna be a lifesaver from now on!

  I could've most certainly used the shorthand for the border-radius, as you can see I used it elsewhere in the CSS. That's why I think the CSS on this project was a complete mess haha.

  Again, thank you so much for the REM conversion trick. It actually helped me understand EM and REM ALOT more!

  Thanks again buddy!

  0