Design comparison
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
- @yasssuzPosted over 3 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 :)
1@Enoah35Posted over 3 years ago@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 - Your mobile version looks ok, but the elements are attached on the left and right, you can solve this by adding a
- @yasssuzPosted over 3 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 :)
0 - Your mobile version looks ok, but the elements are attached on the left and right, you can solve this by adding a
Please log in to post a comment
Log in with GitHub
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