Submitted 7 months ago

Four card feature section with Grid desktop and flex box mobile

Jordan Davenport•970

@jjdavenport

Preview site View code

This is a solution for...Four card feature section

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

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

The desktop grid and building a mobile first layout.

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

Difficulty with the layout of the cards, I prefer to use flexbox so they are not identical to the original.

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

Overflow and using clamp with the width and height of the cards, and how to setup the layout of the cards as flexbox is not good enough to match the orignal, so the cards may have to use margin instead.

Community feedback

John Pugh•340
@JohnPugh688Posted 7 months ago
Hi Jordan,

You solution looks great! i have a few suggestions that might help.

using flex in your cards and justifying space between has caused your spaced things to far apart. instead of using flex to pace things out try adding padding or use Gap. this gives you control of your spacing.

Also its worth setting max width to your main section to avoid things over stretching on bigger screen sizes. giving a max width of 1440px will prevent this from happening. I also like to add margin x of auto to keep things in the centre off the screen although Im not sure this is absolutely necessary so if anyone more experienced can confirm this that would be great.

Also adding a box shadow to the cards makes them pop out and look even better.

Hope this helps
Marked as helpful
1

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