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 Challenge

@marwane-m7b

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


How can i move the testimonials down a little bit

Community feedback

Account Deleted

Hi Marwane,

Well done on this challenge! To answer your question: you could use the "grid-row-gap" property. You can assign it a value and a unit like 3rem and you'll end up with a gap between both of the rows on your grid.

I also wanted to bring up that your media queries are currently kicking in too late - The desktop layout ends up with a horizontal scroll bar because the content cannot fit on the screen before your mobile layout is displayed. My recommendation to avoid this would be to start with the mobile layout first, and then having media queries with a min-width instead of max-width like you currently have it. Going from the smaller design to the bigger one as you write your code is a great way of making sure your site will be responsive at different screen sizes, instead of doing it the opposite way.

I hope this helps! Let me know if you have any questions, and happy coding! 😊

Marked as helpful

0

@marwane-m7b

Posted

@LazyDuckling I changed a few things and modified the testimonials with margin and also made it more responsive, can you take a look

0

Account Deleted

@marwane-m7b Very nice, this is a big step up on the responsiveness!

If you are looking to replicate the original design as much as possible, the mobile design should have an equal margin between the infos, rates and testimonials, and then between each rate should match between each testimonial. The rates should also be stretching to take as much space as the testimonials for the width.

Other than that, this is a really great improvement! Well done!

Marked as helpful

0

@marwane-m7b

Posted

@LazyDuckling Thank you your feedback was soooo helpful i edit the mobile resposive now and sorry for any language mistake i because don't speak english

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