Submitted 3 months ago

Responsive Four Card Feature Section with CSS Flexbox

Tanvir Ahmed Siddiqui• 80

@ttanvirr

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

What are you most proud of, and what would you do differently next time?

I am proud of my improvement.

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

In this project, in desktop view, the middle column has two cards one below another while the other two columns have one card. I encountered a challenge immediately when started solving the desktop view. But it took no time to make me decide that I should divide the cards into three columns and then apply the flexbox method.

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

In the design, the top border style is a little different at the edge from my solution. Maybe anybody can help me with that. Besides, I want to see other solutions.

Community feedback

mijeong• 160

@snakechickensoup

Posted 3 months ago

I experienced the same issue. Initially, I styled the card using border-top, but it didn't match the example design. So, instead of using border, I placed a div element at the top, set its height, filled its background color, and then applied overflow: hidden to the card element. This approach made the design look more like the example. I'm not sure if this is the correct method, but I hope it helps!

Marked as helpful

Tanvir Ahmed Siddiqui• 80

@ttanvirr

Posted 3 months ago

@snakechickensoup Thank you, mate. You've given me a solution.

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