Skip to content
Submitted over 3 years ago

Desktop version of testimonials grid

Daniel Hiroyuki Fujita•40
@DanielOsw22
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Testimonials grid section
  • HTML
  • CSS
2junior

Design comparison

SolutionDesign

Solution retrospective

I'm having two issues that I cound't really figure out. The first one is, why or how do I make all pictures the same size while keeping it responsive on different container sizes? I think using fixed sizing on width wouldn't be the best option and %'s are relative to the container size. Second one is, using padding on grid items just messes all the grid alignments and I coudn't find a way the fix it.

Can anyone help me with those two issues please?

Community feedback

  • Joel•290
    @joelsalmeidaPosted over 3 years ago

    Hi Daniel. I took a look at your code and I'll give you some tips.

    In the original design, all cards have the same spacing pattern.

    • You can achieve this result by applying column-gap and row-gap to the container. "no percentages, try em or px...". Four columns and two rows. All have the same fraction in this case 1fr.

    • The testimonies must take up all the space. Just add some padding around it. Then just work on the text spacing.

    • About the pictures: You are using disproportionate measures: max-height: 50%; max-width: 100%; Try something like: width: 50px; height: auto; "keeping proportion".

    Hope this helps. Keep coding. ;)

    Marked as helpful
    1
    Daniel Hiroyuki Fujita•40
    @DanielOsw22Posted over 3 years ago

    @joelsalmeida Thanks Joel! I took your tips and also tried a few things. Pictures looks perfect, but the alignment still are not perfect, is it something with the container width (should I not use %'s for grid containers e items?)? I'm sorry I really tried changing all kind of sizings but still can't figure this out.

    0
    Joel•290
    @joelsalmeidaPosted over 3 years ago

    @DanielOsw22 This is messing up the entire grid:

    .testimonial t1 { width: 90%; ...

    Try removing this property. That should solve it.

    Tip: You can observe your page's behavior using your browser's "inspect" tool. It helps a lot to see things that are "hidden" in the code.

    I recommend you check out this article:

    Percentage CSS data type: MDN Web Docs

    I think it will be very enlightening. Keep coding. ;)

    1
    Daniel Hiroyuki Fujita•40
    @DanielOsw22Posted over 3 years ago

    @joelsalmeida Hello Joel! wow, cound't imagine it was this simple, but it makes all sense. Sorry for the wait btw but this fixed it ! Thanks a lot!

    0
  • Patrick•14,265
    @palgrammingPosted over 3 years ago

    some might tell you I am wrong but in this case the photo is pretty much a static element so I would just assign a class to all the photos with a fixed width. Responsive to me is that is looks good across all browser widths not that the page endlessly scales in proper proportions but that the design looks nice for what ever device is being used and no matter the device the users get the similar experience

    Marked as helpful
    1
    Daniel Hiroyuki Fujita•40
    @DanielOsw22Posted over 3 years ago

    Hello @palgramming thanks this really keeps pictures fine!

    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