Submitted 4 months ago

Four Card Feature Section by actuallyWIKKO

ActuallyWIKKO• 20

@ActuallyWIKKO

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?

First this was pretty smooth. I started with the mobile view and then moved on to the desktop view. It turned out good though. I'm most proud of the fact that I managed to get this in a shape of good to go. I've learned quit a bit.

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

There were a little struggle - especially with the alignment in the desktop view. Miss GPT helped me to get the hang of this and also helped fix a couple of bugs. Turns out the width values in the desktop view for my card components are very specific (23%) and I would have not figured that out without AI help.

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

I would want to find out a way to work without the negative viewport height value.

Community feedback

Linh Nguyen• 150

@auri222

Posted 4 months ago

The text in the cards doesn't align properly (it should be on the left).

I know this is a little cheat but you can watch this video from Kevin Powell's YouTube channel (here is the link Responsive layout practice for beginners), which is a proper solution for this challenge, he has explained everything clearly so that you can understand better. I also watched this video and approached the flexbox solution on my own instead of the grid solution.

Marked as helpful

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