Submitted about 2 years ago

Responsive Social Proof Section

yashgo30• 40

@yashgo30

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Social proof section

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

I loved this one because I got it in the first attempt and I was very happy. Still I don't know if everything is perfect in the coding part.

I have used position relative to move things slightly from their places. And I have used CSS grid to create ratings section and testimonial section.

Community feedback

Dun• 290

@DundeeA

Posted about 2 years ago

Congratulations on completing this challenge. This solution is so well made its difficult to give advice on how to improve, but I did notice the responsiveness to larger screens could use a little work.

Its not uncommon for users to browse the web with a 4k monitor (3840 x 2160). The elements are a little small with 1080p but really shrink at 4k resolution. This can also help with accessibility considering the text will be harder to read on bigger screens if the elements don't scale up accordingly.

Marked as helpful

yashgo30• 40

@yashgo30

Posted about 2 years ago

@DundeeA thank you so much for your feedback. Actually I have a laptop with 1080p resolution and 125% scale. So the problem is I don't know how my website looks at actual 1080p resolution and higher resolutions. Also I don't know how can I scale things up at higher screen sizes. Will you please help me with that.

Adriano• 34,090

@AdrianoEscarabote

Posted about 2 years ago

Hi yashgo30, how are you?

I really liked the result of your project, but I have some tips that I think you will like:

I noticed that the content was stretching a lot at higher resolutions and making the layout look a little strange, to fix this we can use a max-width.

main { max-width: 1440px; }

The layout will stop stretching!

The rest is great! Hope it helps... 👍

Marked as helpful

yashgo30• 40

@yashgo30

Posted about 2 years ago

@AdrianoEscarabote thank you so much for drawing my attention to this. I did exactly what you told and it is looking much better now but still everything is very small at that screen resolution. I have a 1080p laptop with 125% zoom so I don't get idea how it would look at higher screen sizes. Do you have any solution for that?

Adriano• 34,090

@AdrianoEscarabote

Posted about 2 years ago

@yashgo30 you can use google inspect to get a sense of how it looks at different resolutions.

To open DevTools, right-click the page and select Inspect. Another option is to press Command + Option + C (Mac) or Control + Shift + C (Windows, Linux, Chrome OS). Click on the Console tab.

a guide to learn how to use devtools: click here

hope it helps... 👍

Marked as helpful

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