Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Four section card master

Gloryjaw 320

@Gloryjaw

Desktop design screenshot for the Four card feature section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

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

P
ApplePieGiraffe 30,565

@ApplePieGiraffe

Posted

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 that span in your CSS (like h1 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 GitHub
Discord logo

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