Submitted over 4 years ago

CSS Grid, CSS FlexBox and SASS

@Enoah35

A solution to the Social proof section challenge

Solution retrospective

Attempted 3 times. Two attempts, I have started from desktop design and then use @media query for mobile. But I could not figure out some of the elements to appear as shown in the screenshot. So on my last attempt I started making from mobile layout which I found much easier for this project.

Used Flexbox for the testimonial and the rating sections. But the layer itself has been made using Grid. Checked with my mobile the webpage and it is responsive. Included screenshots for the Desktop and Mobile version using Firefox snapshot.

As usual any comments, advices, critiques is welcome!

Code

Please log in to post a comment

Community feedback

Karim•590
@yasssuz
Posted over 4 years ago
Hello Ushiyama!

Awesome build, but I would change somethings:
- Your mobile version looks ok, but the elements are attached on the left and right, you can solve this by adding a margin: 20px; inside the .social-panel .
- after 375px until 1200px your layout just die. This is because the computer layout will not work on a screen of small size. Change your media query from 375px to at least 1050px.
happy coding and if I was helpful please upvote my comment :)
Karim•590
@yasssuz
Posted over 4 years ago
Hello Ushiyama!

Awesome build, but I would change somethings:
- Your mobile version looks ok, but the elements are attached on the left and right, you can solve this by adding a margin: 20px; inside the .social-panel .
- after 375px until 1200px your layout just die. This is because the computer layout will not work on a screen of small size. Change your media query from 375px to at least 1050px.
happy coding and if I was helpful please upvote my 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