Skip to content
Submitted about 2 years ago

four-card-feature-section

Taro Chilongoshi•40
@Tchilo
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

Putting the cards in the center was a challenge for some reason I don't know the margin: 0 auto did not work.

I am not sure why the vertical space between the two cards in the center has that big space as compared to the original design. Any pointers will highly be appreciated.

Enjoyed solving the challenge with tailwind I have learned a lot....any feedback as to how I can improve my work will highly be appreciated..... Many thanks

Community feedback

  • omar saleh•150
    @omarsaleh11Posted about 2 years ago

    you did a nice job, bro!

    but I think if you delete this line, will reduce the margin between them

    .lg:grid-rows-5 { grid-template-rows: repeat(5,minmax(0,125px));

    and make the p element on the header in CSS like that p { max-width: 34ch; margin-inline: auto; } that will make the words on the header the same as the design and change the color too

    0

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