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, CSS FlexBox and SASS

@Enoah35

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


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!

Community feedback

Karim 590

@Galielo-App

Posted

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 :)

1

@Enoah35

Posted

@Galielo-App Hello! Thanks for the tips. I made those modifications and yes it is true that in mobile mode, all elements were stuck on the sides. Putting a margin made a big difference!

Also yes, it is true that while shrinking the browser the content gets squished so much from the range of what you mentioned to an un-tolerable level. Swapping it to switch around 768~1050px swaps the layout so it is more tolerable to see. Thank you again for the advices!

1
Karim 590

@Galielo-App

Posted

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 :)

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