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

8th Challenge: Soical proof section

@DrunkenNeoguri

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


(This article was written using google translate. Sorry if the grammar is weird.)

Long time no see! I did the 8th challenge with this project!

To be honest, it completed the project, but it was not satisfactory. The most difficult part while working was the following.

  1. I wanted to space the description part of the review the same as the image. I tried adjusting the padding and margin several times, but it was difficult to make it exactly like the image.

If anyone knows another way, please let me know!

  1. In the mobile design image, the width of the review box and the rating box are printed the same, In my design, the width of the rating box is smaller than the width of the review box.

To somehow solve that problem, change the 'margin: 0;', I modified it by expanding the padding value in the box, but the width of the review area and the rating area is different depending on the web size.

How did other people solve it to get the same size? I will take note of your comments!

Code reviews and advice are always helpful for my studies. Afterwards, I would like to try this challenge again with reference to your comments!

Thanks for reading, see you in the next challenge!

Community feedback

Abhik 4,840

@abhik-b

Posted

👋 Hello DRUNKEN NEOGURI , Your solution is awesome & it is very responsive Well Done 🤩🤩🤩

I tried to solve the questions you asked but could not find something concrete so I am sharing this video which is very informative !

Please keep contributing this amazing solution 👍

Marked as helpful

1

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