Responsive Social Proof Section

Community feedback

• 

  Dun•290

  @DundeeAPosted 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

  1

  ---

  

  yashgo30•40

  @yashgo30Posted 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.

  0
• 

  Adriano•38,120

  @AdrianoEscarabotePosted 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

  1

  ---

  

  yashgo30•40

  @yashgo30Posted 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?

  1

  

  Adriano•38,120

  @AdrianoEscarabotePosted 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

  1