Design comparison
Solution retrospective
I was really hard to do this with flexbox (especially getting 4 cards to equal width with flexbox with padding). After lots of reading (almost broke my laptop), I managed to do that with max-width. I was wondering if there is any better way to position those 4 section and giving them widths instead of using Flexbox.(maybe with grid?)
Community feedback
- @ApplePieGiraffePosted over 2 years ago
Hello there, Gloryjaw! 👋
Well done on this challenge! 👍 Your solution looks great! 👏
You can use CSS grid to layout the feature cards in this challenge. That's what I did in my solution to this challenge. I don't know if it's the best way, but it's definitely an alternative! 😉
As for the width of the feature cards, I've often found that it is better to set the width of container elements (such as the feature cards) to
100%
and then add a max-width to those elements to prevent them from becoming too wide when there's plenty of space around them. This is better than setting the width of the element to a fixed value or percentage because it'll ensure that the element takes up as much space as it should be allowed but also shrinks accordingly when its parent element shrinks.Besides that, I suggest using a single heading tag for the heading in this challenge (since it is really a single heading, not two separate headings). You can easily style each part of the heading differently by wrapping one of them in a
span
tag and then targeting thatspan
in your CSS (likeh1 span { styles go here }
).Hope you find these tips helpful. 😊
Keep coding (and happy coding, too)! 😁
2
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