Skip to content
Submitted over 3 years ago

Social Proof Section with HTML and CSS

Melvin•270
@MelvinMelonGit
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

Hi there! Thanks for viewing my solution! :)

I struggled with this for about 3 hours because I was experimenting with grids. I resorted back to flexbox instead. I guess there is much for me to learn for CSS.

Just a few questions.

1 - Initially my ratings section in the mobile view looks too small compared to the rest of the layout, even though I took away the margins and paddings on the sides. It was only when I used the inspect tool and realised "inline-block" in the parent container actually worked. May I know why "display: flex" in the parent container did not extend the width (of the ratings) fully? - You may check it in line 141 of my css file.

2 - I'm not familiar with grids, but is there a feasible way to achieve this layout?

3 - I used CSS transform to adjust the position of the cards and ratings in the desktop view, is there a better way to achieve this effect?

4 - May I know what can I do to improve my code?

Thanks again!

Community feedback

  • Patrick•14,265
    @palgrammingPosted over 3 years ago

    well first I would look at your page at about 800px wide and see what is happening to your avatar images. fixed pixel sizes should not be looked down upon for some thing. I page can be responsive but does not need to endlessly scale

    also you could easily use grid for this but you might break up the page into different grids. I thought I used Grid in my solution but I used flexbox... With Grid I really like Grid Template Areas you might want to play with those

    0
    Melvin•270
    @MelvinMelonGitPosted over 3 years ago

    Hi @palgramming,

    Thanks for your reply! Will take note of this in future challenges :)

    0

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