Four card feature section with Grid desktop and flex box mobile
Design comparison
Solution retrospective
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
- @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 helpful1
Please log in to post a comment
Log in with GitHubJoin 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