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-card-feature-section

@preciousoduh

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


Hey everyone, hope you're having a good day/night. for this challenge I had problem with the vh of the section class of container that contained all my boxes, below the box of karma there isn't space I tried setting the viewheight of it to 100% but that made my box with a class of supervisor and calculator move from being positioned in the center. apart from applying margin-bottom is there any other alternative? please give me suggestions thank you

Community feedback

David 8,000

@DavidMorgade

Posted

Hello and congrats on finishing the challenge!

In this case I think is better to go directly for a grid instead of flexbox for the cards, you could get the desired results with flexbox too, but it will be a bit hard, you can position each lateral cards using align-self: center while the other two can be positioned at flex-start, you will have to make a lot of changes tho.

Remove the margin-top and position: relative from your header. Use align-items: flex-start in your section and remove the position: relative. Add align-self: center to the supervisor and calculator. Play with the height of the container until you get the desired result.

But as I said to you at the start, I think that display: grid fits better in this challenge!

Hope my feedback helps you!

0

@preciousoduh

Posted

@DavidMorgade oh I see thank you very muchhhh

1

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