Submitted 11 months ago

Responsive Social Proof Section

rzho17• 50

@rzho17

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Social proof section

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

I have issues with setting the max-height of an element, specifically my testimonial containers. I tried to set a max height of 250px but it still continued to grow past it. I assumed it may because I have a flex property on them but I am not sure.

Also I am curious if I am using flexbox too much for each design element. Is this a bad practice? I am just more comfortable using it than grid but will practice other display methods if it is bad practice.

Thanks for any feedback!

Community feedback

Carlos Chaves• 260

@sircarloschaves

Posted 11 months ago

What's up friend, how's it going?

Let's go:

For the testimonial containers you could have used display: grid, you would do grid-template-columns: 1fr in the mobile layout, and when you switched to the desktop you would do grid-template-columns: repeat(3 , 1fr);
I think it's interesting that you don't specify a size for the container, but rather let padding-block define the size of your container, but if you found the responsiveness the way you did it best, and it worked, everything is fine. But in general you don't want to specify a fixed size for your designs.

Please log in to post a comment

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