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

CSS Grid solution

P

@nnorthway

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


Had some trouble with the alignment of the icons and the text next to them. Ended up using a margin to adjust but that didn't feel right. What would you have done?

Community feedback

P
Dave 5,245

@dwhenson

Posted

hi @nnorthway yes, those stars are pesky! I had trouble with them. I think if you change your justify-content setting on the .stars to center that will help put them in the center of the parent container.

But overall I probably wouldn't use grid on the #ratings as it complicates things. I would try just keeping the divs stacked as they are and then playing around with some left and right margins on each div in turn to create the off-set effect (one side will be negative values to shift things over).

Great stuff and keep up the good work!!

2

P

@nnorthway

Posted

@dwhenson thanks! I'm trying to use grid in a lot of things I do just to get a better handle on it. Also had trouble getting the correct alignment on the ratings with other methods, like using margins. Definitely could see not using grid on the actual testimonials area though.

I did try using different values for justify-content but things still weren't aligning. Think it might be Chrome being funky, as per usual, should have opened in FF or Safari.

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