Skip to content
Submitted about 2 years ago

Social proof section

Yiwen Chen•190
@CHEN-YiWen
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Social proof section
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hi! This is my solution to Social Proof Section Challenge. I think the layout turns out decent. However, I am not so sure about how it looks when I resize the screen, as

  1. the h1 (10,000+ of our users love our products. ) will turn into four lines instead of staying in three lines. It doesn't look visually pleasing enough.
  2. the bottom of the review cards won't stay in this situation: the bottom of the first review box stays higher than the second one while the second one is also higher than the third one.

I would love to know how I can solve these issues. If you have any tips for them or any other suggestions, feel free to comment! Thank you😊

Community feedback

  • Lucas 👾•104,340
    @correlucasPosted about 2 years ago

    👾Hello Yiwen Chen, Congratulations on completing this challenge!

    I saw your preview site and I liked a lot the work you’ve done here, it's almost complete, I’ve some suggestions you can consider applying to your code:

    You’re in the right track I can see that you’ve used the majority semantic tags possible for this challenge, the only block you’ve missed is the paragraph containing the quote text you can improve the accessibility there using <blockquote> to indicate to screen readers that the content inside that paragraph is a quote.

    Use units as rem or em instead of px to improve your performance by resizing fonts between different screens and devices.

    To save your time you can code you whole page using px and then in the end use a VsCode plugin called px to rem heres the link → https://marketplace.visualstudio.com/items?itemName=sainoba.px-to-rem to do the automatic conversion or use this website https://pixelsconverter.com/px-to-rem

    ✌️ I hope this helps you and happy coding!

    Marked as helpful
    0
    Yiwen Chen•190
    @CHEN-YiWenPosted about 2 years ago

    @correlucas Thank you! I will follow your suggestions and improve the code. 😊

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord