Skip to content
Submitted over 2 years ago

Social Proof Section using HTML, CSS and Flexbox

Wesley•330
@wesleyjacoby
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

I found this challenge very difficult. The hardest part was deciding whether to use CSS Grid or Flexbox and then how to implement it for the mobile and desktop versions.

CSS Grid would have been perfect for the mobile design, but I wasn't sure how to implement it for the desktop version.

I ended up using Flexbox for both the mobile and desktop version.

If I had to use CSS Grid, how many columns and rows would the desktop version have? 3 columns and 2 rows? And can you still use transform: translate(Y) with CSS Grid?

All in all, I'm not too happy with this one. I may need to do it over again using CSS Grid.

Thanks for the help!

Community feedback

  • Account deleted

    Hi Wesley,

    Well done on completing this challenge! This is a great first step into more complicated layouts.

    I used grid for this one - I personally went with 2 rows and 2 columns - The two columns were for the top part of the design. Then, I used a div with its own grid spanning the bottom row, with 1 row and 3 columns. This allowed me to position the three cards individually - You can have a look at my solution if you want to see the code.

    I would do things a bit differently now that I've gotten more practice (I'm pretty sure I could've just put three rows on the main grid instead of having a second grid within a grid), but it should give you a good idea of what I mean.

    I am not sure about your question regarding transform, although you should not need it since you can use justify and align to position your elements within the rows/columns.

    Marked as helpful
    0
    Wesley•330
    @wesleyjacobyPosted over 2 years ago

    @LazyDuckling Hi!

    Thanks so much for the feedback. I also think I should have gone with grid on this one. I'm going to redo it using grid and see if I struggle less.

    I completely forgot about the justify and align properties for grid. I really need to use grid more to get familiar with it.

    Thanks again for the help! :)

    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