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

@khadijahashmi2

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


I've done the mobile section, but i don't even know where to begin with the desktop version. a point in direction would be very helpful.

Community feedback

Kaasfeetje 190

@Kaasfeetje

Posted

Put a div around the 3 ratings, give the middle one x amount of margin and then the bottom one a bit more margin. Put a div around the title and pitch align everything to the left. Add a div around the new 2 divs you created and set it to display:flex; and justify-content:space-between; and probably align-items:bottom.

Then on the testimonial of colton and irene, add some margin (colton the most). Set the testimonial display:flex;

To add different styles when on different screensizes use @media (min-width: screensize){} where screensize is the size of the screen you want the styles inbetween the parentheses to be active.

Marked as helpful

1

@khadijahashmi2

Posted

@Kaasfeetje thankyou! this was incredibly helpful :D and I managed to make it a lot better than before.

0

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