Skip to content
Submitted over 2 years ago

Four Card Feature Section

charmonderā€¢260
@charmonder
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

Hello, everyone! I'm trying to finish all the Newbie challenges. Hope I do well in this challenge :) Looking forward to your feedback!

Community feedback

  • Lucas šŸ‘¾ā€¢104,400
    @correlucasPosted over 2 years ago

    šŸ”„ Hello Charmonder! Congratulations for your new challenge bro!

    Your solution is really good, there's only a little problem with the cards that are not working properly when it scales down.

    šŸ”„ I've inspected your code and is some fixed height you've applied, see the code below:

    .supervisor, .builder, .karma, .calculator {
    /* height: 220px; */
}

    šŸ”„ There's no need to set height for this element, what will make the height grows is the elements itself and the padding between the img, paragraph and h1.

    šŸ”„ The box-shadow seems a little bit too strong, maybe you can give it a little bit less opacity to blend the background.

    šŸ”„ And if you want to keep it super super responsive, maybe you can a media query more making the cards into two columns with two cards, around 768px.

    Well done Charmonder!

    Hope it helps, and happy coding bro!

    Marked as helpful
    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