Skip to content
Submitted about 2 years ago

Four Card Feature Section Using CSS Grid 🌐

Fahim Hossain•290
@Mr-NotSoCreative
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Four card feature section
  • HTML
  • CSS
1newbie

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
    @PPechmannPosted 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
    1
    Fahim Hossain•290
    @Mr-NotSoCreativePosted 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?

    0
  • Patrick•800
    @PPechmannPosted 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.

    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