Submitted almost 3 years ago

Responsive Mobile First Social Proof Section with CSS Grid and Flex

Brendan• 170

@brendanmadden

Preview site View code

This is a solution for...

Social proof section

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Hi everyone!

This is my 7th solution for Frontend Mentor! I tried hard on this one to use proper Semantic HTML, CSS Flexbox, and Grid. I also took a mobile first approach to this project, and I'm so glad that I did. After completing this one, I'm looking forward to going back and improving on my previous ones!

I would REALLY appreciate any feedback on:

my use of any of the above
how I can continue to improve my layouts for responsiveness
how I can continue to improve my use of Semantic HTML
how I can make my work accessible
any best practices or improvements I can make

Thank you so much for any feedback. I really appreciate it!

Community feedback

dewslyse• 3,025

@dewslyse

Posted almost 3 years ago

Hello Brendan 👋! Awesome job on this challenge 🔥🔥. The page is nice and responsive. I'll be tackling this one soon and hope mine would be as good as yours.

You seem to have a horizontal scroll bar at max-width: 1160px. I think losing the min-width: 100vw on the body would resolve that.

Marked as helpful

Brendan• 170

@brendanmadden

Posted almost 3 years ago

@dewslyse Wow, thank you so much for the kind feedback!! I really appreciate it!

Thanks so much for letting me know, and for the suggestion! I've really had a tough time with setting up my layouts so far. I'll take a look at this and give it a shot when I have a chance later tonight! I still have a ton to learn about HTML and CSS but one of my next area's of focus needs to be on good structure and layout.

Best of luck on yours! I hope to see it once you've completed it!

dewslyse• 3,025

@dewslyse

Posted almost 3 years ago

@brendanmadden glad I could be of help.

Finally managed to complete the challenge. You can check out my solution here ⤵️

dewslyse's solution to the Social proof section challenge

Lemme know what you think.

Mohamad Ghadieh• 50

@mghadieh

Posted almost 3 years ago

I submitted my solution for this challenge right after you on slack. I checked out your code and right away I saw on issue in my solution. I fixed it. Nice use of grid and flexbox. One thing, try and get the spacing right between the elements. For example, the difference in the heights of the testimonial cards in your solution is almost double of the design.

Please log in to post a comment

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