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

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


Feedback is always welcome.

Community feedback

P
Grace 27,950

@grace-snow

Posted

I'm afraid alignment is still quite off from the design on this.

On mobile content is quite narrow in places and none of it is centered for me. Top is slightly to the right, bottom section is slightly to the left.

On desktop the top and bottom sections need to align at the sides like in the design.

I think all of this might come from different paddings, margins and percentage widths being used. If you just used max widths or let the grid and gap handle all that I think it would fix a lot for you.

It would also really help you if you approached these challenges mobile first. Then you wouldn't need to override styles in media queries as much.

Good luck with it

1

@sansk

Posted

Thanks a lot for your comments.

Yeah, I have to adjust the margins little bit and also media queries.

I will incorporate the changes and will update it.

Thanks again.

0

@Etang131

Posted

It looks like it matches the spec to me. I would consider making the media query change happen a bit later from mobile to desktop though.

0

@sansk

Posted

Thanks. I will check and update the media queries.

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