Responsive testimonial section using Sass

Community feedback

• 

  tediko•6,700

  @tediko

  Posted 11 months ago

  Hello @laura-nguyen! The reason why you need to explicitly set height to 100% on the cards is because of how you set your grid container in first place. The fr unit allows us to define grid tracks as fractions of the available space which means if a grid container has 2 rows with 1fr each, they will each take up an equal amount of space, i.e., each row will be 50% of the available space. You're defining grid-template-rows: repeat(2, 1fr); so both of your rows take up equal amount of space, and since your first row card content is bigger than second row cards it will still divide them with equal amout of space leaving second row with cards jumbled as you said. Instead what you want to use is min-content keyword which is the smallest size a box can take without overflowing its content - like so: grid-template-rows: repeat(2, min-content). This way, your second row will be as small as your largest card in that row. Now you can remove height: 100% from .card container and from .card--5 where you set height: 100% and auto within some breakpoint. Last thing you need to do is remove align-items: flex-start because it is doing excatly what you want to avoid. align-items: flex-start aligns items to be flush with the start edge of their cell and instead you want to fill the whole width of the cell with align-items: stretch. But since stretch is default behaviour (align-items: normal) you don't have to explicitly set that, just remove old property.

  Since you're using display: grid for <main> on desktop you should be consistent and also use grid on mobile instead of flex. Why switch between the two if one can do excatly the same?

  Have fun!

  01

  Marked as helpful