Skip to content
Submitted 7 months ago

Responsive four card feature section

P
Destiny•140
@DetDet91
A solution to the Four card feature section challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What challenges did you encounter, and how did you overcome them?

I had trouble getting the diamond formation right and keeping my boxes from shifting shape when the screen size changed. After researching solutions online, I found something that would work with my coding style.

What specific areas of your project would you like help with?

I don't feel like my boxes are the correct sizes, and I feel like everything I do will not change the actual look of the boxes.

Code

Please log in to post a comment

Log in

Community feedback

  • Adam•340
    @nadam-design

    Hello Destiny!

    I see where should you change the css for the optimal layout:

    • .cards: Change the grid-template-areas to this (you made 3 rows but 2 is enough):
    "supervisor team-builder calculator"
"supervisor karma calculator";
    • and change the grid-template-columns to repeat(3, 1fr);

    Hope it helps!

    Marked as helpful

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