Testimonials Grid w/Grid, Flex, Responsive Layout

Community feedback

• 

  Natali 👻 Grimm•1,150

  @Grimm-NPosted 3 days ago

  Amazing work! 👏 I love how much effort you’re putting into this design – it really shows. Keep it up! 🎉 Here are a few suggestions to help refine things even further:

  1. Use relative units instead of pixels – Opt for units like rem or em instead of px. These units adapt better to different screen sizes and user preferences, making your design more flexible and accessible. For example, if someone has increased their browser’s default font size, rem and em will adjust accordingly, while px remains fixed.

  2. Tackle font scaling on large screens – When using em, you might notice fonts becoming too large on bigger screens because em scales based on its parent. To avoid this, try using a combination of clamp for font sizes. For example:

     font-size: clamp(1rem, 2vw, 1.5rem);
     

     This allows you to set a minimum and maximum font size, ensuring it stays proportional without getting out of control.

  3. Plan for medium screen sizes – For screens that are not too small or too large (like tablets), consider a transitional layout. For example, instead of single-column items, you could use a grid with two columns to optimize space usage and make the design look more structured:

     .grid-container {
         display: grid;
         grid-template-columns: repeat(2, 1fr);
         gap: 16px;
     }
     

     This keeps your layout balanced and user-friendly across different devices.

  4. Download and use custom fonts – It’s better to download fonts and add them using @font-face in your CSS. This gives you control over font loading speed, avoids third-party service dependencies, and ensures your design stays consistent even if the external service has issues.

  You're doing fantastic work! Keep experimenting, and you’ll keep improving! 🌟

  Marked as helpful

  1

  ---

  

  P

  whiteriver-dev•120

  @whiteriver-devPosted 3 days ago

  @Grimm-N

  Thank you! Your point #2 is really useful for the problem I was struggling with

  0