Skip to content
Submitted 10 months ago

Social proof section component using HTML and CSS

a-fox-on-the-moonā€¢170
@a-fox-on-the-moon
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 !

I had a few problems with this challenge :

  • I tried at first a position relative / absolute for the reviews on the right but it was very complicated so I put some margins. Was it the right thing to do ?

  • I don't know how to do the bottom part with the 3 violet cards. I had the same problems as above, when I put the position relative / absolute the cards took all the width even though I forced one. I tried the margins too, but of course it didn't work

  • when the index is opened from VSCode it works nice and clean, but when opened with the live site it appears on only half of the height (for which I put a min-height of 100vh). Any idea why ?

  • I did the large screen style first because I find it easier. Someone on Discord told me it wasn't the right thing to do because my code would have a lot more lines then. Is my code clear enough the way it is right now ?

I would love some help and feedback please.

Thanks in advance

Community feedback

  • Daniel šŸ›øā€¢44,270
    @danielmrz-devPosted 10 months ago

    Hello @a-fox-on-the-moon!

    Your solution looks pretty good!

    Most of the issues you faced during this challenge could be approached with CSS Grid. I'd comment how you could do it all, but there are so many details that it would turn into a book.

    But I can tell you this: You don't need to use position on this project. It's possible to finish it with only CSS Grid.

    Try searching how it works or even watching some youtube videos about it. It's not that hard. I can assure you that.

    There's a game called Grid Garden which you can play to practice your Grid layout skills.

    šŸ“Œ Here's the link to it.

    I hope it helps!

    Marked as helpful
    0
    a-fox-on-the-moonā€¢170
    @a-fox-on-the-moonPosted 10 months ago

    Hi @danielmrz-dev !

    Thanks for your feedback :)

    I saw the solution of someone else for this challenge. They used a grid with lots of rows and columns, is this the thing to do ?

    I will try the grid garden. I already have done the flexbox froggy and it was fun !

    1
    Daniel šŸ›øā€¢44,270
    @danielmrz-devPosted 10 months ago

    @a-fox-on-the-moon

    You don't need to use a lot of rows and columns, just enough to be able to position the elements correctly.

    Anyways, using grid is definetely the best technique for this case šŸ˜Š

    0
    a-fox-on-the-moonā€¢170
    @a-fox-on-the-moonPosted 10 months ago

    @danielmrz-dev

    I will try it and update it then.

    Any idea why it doesn't display normally one the live site ? I don't understand, I never had this before. I saw that it isn't updated too when I do a new commit

    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