Submitted almost 3 years ago

Responsive HTML & CSS using Grid to align the cards

Ross Curry• 50

@RossCurry

Preview site View code

This is a solution for...

Testimonials grid section

HTML
CSS

2junior

View challenge

Design comparison

SolutionDesign

Solution retrospective

I guess a question would be how to best organize the rows and columns to dynamically accept new content? I've seen "grid-template-rows: repeat(auto-fill, auto);" suggested but when I implemented it I got inconsistent results.

Also, I think my border around the clip-path was a little hacky. If anyone know something a little more technical I would be greatly obliged.

Thanks

Community feedback

Faris P• 2,810

@FarisPalayi

Posted almost 3 years ago

clip-path seems a good idea (I don't know if it has good browser support). You can also set the .img-border's z-index to -1 and use border-radius: 50% on the image.

Also, your desktop and mobile versions looks great, but, in the tablet version, there is a horizontal scrollbar. Moreover, take a look at HTML semantics, it leads to more consistent and readable code, also better for accessibility.

And, the line-height property should be unitless, and using rem or em is a better idea for font-sizes.

That's all from me. Have fun coding ✨

Marked as helpful

Ross Curry• 50

@RossCurry

Posted almost 3 years ago

Thanks for the great feedback, much appreciated! Using border-radius on the image is good shout. My HTML semantics do also need improvement. Again, thanks for the heads up.

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