Skip to content
Submitted about 4 years ago

Social Proof Section - HTML/CSS

Rayane•1,935
@RayaneBengaoui
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

Hello I have a few questions :

  1. How can I control when the text start wrapping or not ? For exemple on the main title I use mostly "<br />" for line breaks but I guess there is a better approach.

  2. How to make stars from the ratings stick to the left as on the example ? As it's in a display flex I thought a "flex-start" would do the job but it doesn't.

  3. For media queries I'm pretty lost I don't know if what I've done is "okay" as everything get squashed together pretty fast. isn't flexbox supposed to fix this ?

Thank you for your advices, I'm new to the front-end world so any remark is welcomed ! :)

Community feedback

  • ApplePieGiraffe•30,545
    @ApplePieGiraffePosted about 4 years ago

    Hey, Enayar! 👋

    You seem to have somehow disabled horizontal scrolling for your page in the desktop layout (which prevents me from seeing all of the content on my [smaller-sized] screen).

    As for your questions, if you specify a certain width for a container and the text inside it exceeds the width of that container, the text should automatically wrap onto a new line (at least, in most cases).

    Don't forget that with flexbox, you can choose to align certain elements differently by using the align-self property (but your stars look fine to me).

    And I think adding one or two more media queries to your page to make the transition between the desktop and mobile layouts of your site a little smoother would be nice (currently, the testimonial boxes look a little squeezed right before the layout of the page becomes mobile-friendly).

    Otherwise, nice work!

    Keep coding (and happy coding, too)! 😁

    2

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