Skip to content
Submitted about 2 years ago

Social Proof made with HTML and CSS. Also mediaqueries applied

Ivan•50
@shin-bot87
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Social proof section
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

  • It's been difficult adjust de layout to the window, the size even.
  • I'm unsure about how i organized my code, also the class names.
  • Questions for best practise. How to adjust the width and height to the window? and then i want to the layout don't move. Also how to get delete white spaces around the webpage, so thats why my pages never fits to the window.

Community feedback

  • Hamsalekha•90
    @LekhaKumarPosted about 2 years ago

    Hi, congratulation to you on completing this challenge first of all. You have done an excellent job. I have some minor suggestions that I wish to share with you, although I am not able to clear all of your doubts.

    1. You can place different names for each class in the rating section. By doing so, you can clearly distinguish between three other classes, and you can use position: relative and place them in the "staircase" like position by using the top, left, and proper commands in CSS. Perhaps, you can also use the absolute positioning method to do so. This is the link to learn further about positioning https://developer.mozilla.org/en-US/docs/Web/CSS/position You can do the same for the review cards sections.

    2. You can use the Bootstrap 5 library to create column grids. Split the header, review sections and review sections into one row and three columns. Using proper prefixes for the desktop and mobile sizes, you can create a neater design, and the layout will not move.

    This is the link to use Bootstrap 5 for the grid system.

    https://getbootstrap.com/docs/5.0/layout/grid/

    Thank you, and have a blessed day!

    Marked as helpful
    1
    Ivan•50
    @shin-bot87Posted about 2 years ago

    Hi @LekhaKumar ! Thanks a lot for your feedback. You have been really helpful =D Now i know how to handle the layout thanks to you. I will still practising with position relative/absolute and bootstrap libraries.

    1

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