Testimonials grid section | tailwind

Community feedback

• 

  P

  Jaylen Baxter•300

  @JYLNPosted 13 days ago

  This looks great! I noticed some things you might look at improving:

  • The breakpoint for the single column grid and 3 column grid is too small. When resizing the browser, content is overflowing the cards that only span 1 column and words are breaking at one line a piece. Also, the quotation SVG on the first card ends up floating over the user information content. It's happening generally around where some tablet portrait sizes exist. You may consider breaking into the single column layout so that your layout is more consistent.
  • You have your text sizes set to static pixels, which will cause issues on users that have have their browser settings set to a different font sizes than default. Consider using rems or ems to better your UX.
  • On line 28 of your commentComponent, you are using these utility classes: sm:pl-[10.5rem] sm:pr-[10.5rem]. Since both values are the same size for left/right padding, you can use this class: sm:px-[10.5rem] to help clean up the amount of class names you have set within your markup.
  • Within your index.css file, you are setting border-box for box-sizing on all elements. This isn't necessary, as the pre-flight for Tailwind CSS already accomplishes this. You may refresh yourself on the Tailwind docs about it's defaults to help reduce redundant code within your base.

  Overall, great work!

  Marked as helpful

  1

  ---

  

  mahdyar•120

  @MahdyrllPosted 12 days ago

  @JYLN i appreciate your time for viewing my code and the comment. I'll use these tips next time.🙌

  0