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

Mobile first feature section using CSS Grid and Flexbox

@gchristofferson

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


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 340

@Charlie025x

Posted

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

@gchristofferson

Posted

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
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