Skip to content
Submitted about 3 years ago

Mobile first feature section using CSS Grid and Flexbox

Gregg Christofferson•295
@gchristofferson
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

At first I tried using the border-top property on the cards to produce the different colored highlights. However, I found the border would wrap around the corner radius of the boxes and didn't produce the desired effect. So I tried using the ::before pseudo-element for the card. It looks closer to the design, but still not perfect. Is there a better way to produce this effect on the cards that will more closely match the design? Also, any other feedback is welcome. Thanks everyone!!😎✌

Community feedback

  • Charlie•360
    @Charlie025xPosted about 3 years ago

    Looks great!! Only possible improvement you can make is to move your images lower.

    I tried to achieve this by adding a "justify-self: flex-end" to your card-icon class, but that didn't work for some reason. However adding "margin-top: auto" to card-icon did the trick. "margin-top: auto" basically gives margin-top the biggest possible, forcing the content to the bottom of it's container. And if you give "auto" to both margin top and bottom to the same content, you end up centering that content vertically. A similar effect can be achieve with margin left and right.

    Marked as helpful
    0
    Gregg Christofferson•295
    @gchristoffersonPosted about 3 years ago

    Hey @Charlie025x 🙋‍♂️

    I added margin-top: auto; to the .card-icon as you suggested and I think it looks much closer to the design now. Thank you for that feedback!!

    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