Skip to content
Submitted about 1 year ago

Responsive Social Proof Section

rzho17•50
@rzho17
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 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
    @sircarloschavesPosted about 1 year 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.
    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