Testimonials Grid Section Using React

Community feedback

• 

  Huy Phan•2,300

  @huyphan2210Posted about 2 months ago

  Hi, @Achigyus

  I took a look at your solution and I have some thoughts:

  • I noticed you're using min-block-size: 100vh on your .container, which, in this case, is equivalent to min-height: 100vh. This is causing an overflow, making the page scrollable on desktop viewports (which I assume is not intended). I'd recommend applying min-height: 100vh to the body instead, rather than using min-block-size on the .container.
  • I see that you're a pro user with access to the design files, which explains why you'd like to make your page the same as the design. However, I noticed you're using rem values like 4.438rem or 15.938rem. While rem is generally great for scalability, using such precise decimal values can make the code less elegant. Consider rounding these values or using px for more predictable sizing.

  Hope this helps!

  1

  ---

  

  P

  Achi Gyuse Achi•160

  @AchigyusPosted about 2 months ago

  @huyphan2210 Thanks for taking the time to go through my solution.

  On the overflow, I actually intended it to be that way as I wanted the attribution section to only be visible when you scroll down.

  I understand what you are saying about the rem values, but I always like to get my solutions as close/pixel perfect as possible to the original design. I am curious by what you mean when you say "using such precise decimal values can make the code less elegant". Can you please expand on that or link an article so I can learn and improve.

  Thanks again for the review. I really appreciate it

  PS: I dropped you a follow on Github and LinkedIn, I will appreciate if you followed me back.

  1

  

  Huy Phan•2,300

  @huyphan2210Posted about 2 months ago

  @Achigyus

  I should have been clearer. Using precise decimal values is fine, but I don't find numbers like 4.438rem or 15.938rem particularly elegant.

  It's more of a personal preference. I tend to use values like 4.5rem, 4.25rem, or even 4.125rem, but not 4.438rem. In such cases, I'd rather round it off and use 71px (even though it's not an exact conversion). I understand you want to match the design as closely as possible.

  However, consider this: in a professional environment where you're working with others, your code will be reviewed or refactored by colleagues. I don't think many would appreciate seeing 4.438rem in the code. Of course, this is just my bias, but I haven't seen such precise values used often in a professional setting.

  P.S. Thanks for the follow! I followed you back :)

  Marked as helpful

  0

  

  P

  Achi Gyuse Achi•160

  @AchigyusPosted about 2 months ago

  @huyphan2210 thanks for explaining. I understand now, 4.4rem looks better than 4.438rem.

  1