Submitted about 2 years ago

Four Card Feature Section Using CSS Grid 🌐

Fahim Hossain• 290

@Mr-NotSoCreative

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Four card feature section

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Hello Everyone !! 👋 This is my solution to the Four card feature section challenge. I've used CSS display Grid property to design the whole four card feature section along with other CSS custom properties. I hope I build out this project to the design provided. If there are any mistakes or I missed something let me know in the comment section.

Feedback is welcome ✨

Community feedback

Patrick• 800

@PPechmann

Posted about 2 years ago

Hey @Mr-NotSoCreative!

Very well done on this challenge, good job!

I saw that the screenshot solution is almost perfect, but when opening the website link, the card shrinks a lot on 1440px, due to the min-width: fit-content. I recommend changing it to min-width: 23rem, for example, to better define the dimensions on bigger screen sizes.

Very nice job again! Hope my short feedback helps :)

Patrick

Marked as helpful

Fahim Hossain• 290

@Mr-NotSoCreative

Posted about 2 years ago

@PPechmann Hello, Patrick Thanks for taking the time to review my solution. I did some adjustments on the .card according to your tips. How does it look now?

Patrick• 800

@PPechmann

Posted about 2 years ago

@Mr-NotSoCreative Looking much better already! I would still add a min-width to the .card , just to make sure it won't resize when lowering the screen size.

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