Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Social Proof Section - HTML/CSS

Rayane 1,935

@RayaneBengaoui

Desktop design screenshot for the Social proof section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

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

P
ApplePieGiraffe 30,545

@ApplePieGiraffe

Posted

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
Discord logo

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