Submitted almost 3 years ago

Social Proof Section using HTML, CSS and Flexbox

@wesleyjacoby

A solution to the Social proof section challenge

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!

Code

Please log in to post a comment

Community feedback

Account deletedPosted almost 3 years ago
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

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