Submitted 2 months ago

four card feature section using css grid, flexbox and sassy css

HamzeKabi• 100

@HamzeKabi

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 used flexbox for mobile version and css grid for desktop version.

Before starting the project, I assumed this transition in layout would be a big hassle, but contrary to what I expected, I applied this transition with ease.

I'll be using css grid more

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

Converting single column(mobile version) to multiple column(desktop version). I overcame it by using flexbox for single column and css grid for multicolumn version.

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

I used flexbox for single column and css grid for multicolumn version. I'm curious to know what methods others have used.

Community feedback

Srishti Chaudhary• 110

@itsmesrishti

Posted about 2 months ago

Hi, great work on the project! The only tip I have is that for feature card you could consider adding a max-width and a min-width so that the design stays the same across various devices. Other than that great work!

I was looking at your html and I saw that you used <h2> tags for the main heading I wonder why?! Were you considering this as a section of a whole website?

For my own project, I wanted to restrict myself to flexbox only for the desktop as well so I used flex-wrap and max-width and switched the order of a card.

Again, kudos for accomplishing the task successfully!

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