Submitted about 3 years ago

Testimonials section using Grid

Dawid7600•100

@Dawid7600

Preview site View code

This is a solution for...Testimonials grid section

HTML
CSS

2junior

Design comparison

SolutionDesign

Solution retrospective

I finished my second project on the Frontend Mentor website. However, I have 2 problems with my project:

I can't set the gap beetween the rows.
I can't set background quote symbol in purple section .

I will be very grateful for your help with my problems as well as for tips and advice to be able to improve my skills :)

Community feedback

Rémi Martineau•355
@MartineauRemiPosted about 3 years ago
Hey ! Congratulations, you did a great job :)

I see you used CSS Grid to build your layout. You can set the row gap value using the property 'row-gap' in your container.

One way you can deal with the background quote symbol is :

Set the '.first-col' container 'position' property to 'relative'

Add the image element in the container and set it's 'position' property to 'absolute'

Tweak the 'right' and 'top' property of the quote symbol

Adjust the z-index of your elements in your container

Hope that helps Happy Coding !
Marked as helpful
0
Dawid7600•100
@Dawid7600Posted about 3 years ago
@MartineauRemi Hi ! Thanks for the answer :) I can do only bigger gap than now using gap-row, I don't know why.
0
Rémi Martineau•355
@MartineauRemiPosted about 3 years ago
@Dawid7600 If you chose to apply 'row-gap' and 'column-gap' properties when using CSS Grid, you don't need to put 'margin' on your elements anymore.

Try to get rid of the margins on your elements having the '.feedback' class
Marked as helpful
0

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