Skip to content
Submitted over 2 years ago

four-card-feature-section

oduh precious•170
@preciousoduh
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Four card feature section
  • HTML
  • CSS
1newbie

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
    @DavidMorgadePosted over 2 years ago

    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
    oduh precious•170
    @preciousoduhPosted over 2 years ago

    @DavidMorgade oh I see thank you very muchhhh

    1

Please log in to post a comment

Log in with GitHub

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