Submitted over 3 years ago

Social Proof Section- Mobile First React and SASS (Grid/Flex)

matiussi•155

@matiussi

Preview site View code

This is a solution for...Social proof section

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

Hello o/.

Here is my solution for the Social Proof Section, this is my first Mobile First website, using the Mobile First Approach was way more complex than I thought 😅, I'm not quite sure if I did the right way, because some people say that this approach is time saver... But in my case was the opposite (Maybe because is my first time), I had to overwrite my CSS a lot of times to achieve a good result in different displays... Honestly I'm still kind lost when it comes to CSS optimization, but I'll do my best 🙌

I also made a tablet layout 👩‍💻

If someone could give me some feedback, especially in the media queries and CSS code optimization I would be super happy 😊

Community feedback

Akshay Meshram•390
@akshay63Posted over 3 years ago
Hey laura-2035! Your solution looks great and yeah a bit messy in the Media query part. I know building the "Mobile-first" layout is a bit difficult because I have told it is. I used max-width only till now but I will try min-width also in my coming challenges.

Some suggestions from me are- When media queries are triggered in 1200 and 900, I found extra space between rating bars and review cards. You can center the rating bars and make the review cards 100% width.

Keep coding! 👌👍
1
matiussi•155
@matiussiPosted over 3 years ago
Hello @akshay63 o/

Thanks for the feedback, I'll make some changes and then re-upload the submission. I'll try to use less specific media queries and use more min-width()/max-width.
0

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