Skip to content
Submitted about 3 years ago

Stats Preview card with full explanation using Flex-box and Mobile Fi

Hamzat Lawal•560
@EngineerHamziey
A solution to the Stats preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Thanks to my Mentors @vanzasetia and @grace-snow and other mentors for the review of my previous solutions, I can't wait to see your review on this one as well. I just think doing the correction and explaining it will help a lot of friends out there. Please feel free to point out my mistakes.

Code

Please log in to post a comment

Log in

Community feedback

  • Grace•32,130
    @grace-snow

    Hi again

    This is using padding and margin in a strange way, making everything really complex in the text side of the card, and even the component itself (padding on the body and side margin on the card).

    Padding is for internal spacing. Think boxes. It's for creating space from the boundary. Padding will never collapse, so if two items have padding, double the space.

    Margin is for external spacing. This often only goes in one direction, or along one axis. Think block elements and creating space between them. Margin collapses, so if a heading has margin bottom and paragraph has margin top, the two margins will overlap and take up the same space on screen.

    On the text side of the card I would expect to see

    • padding on that half of the card
    • direct children of heading element, paragraph and list
    • margin top/bottom only on those three elements, no padding. They are all block level elements containing text content, so only need space between not inside.

    On the stats list, it is flex so again you don't need margin on elements inside or padding on that. Use the gap property and justify-content space-between

    All of this is really important to refactor and get comfortable with as it will become really difficult to manage larger projects later on if you use margin and padding so haphazardly. Have devtools open on the side of your browser, zoom in and out often and inspect a lot with devtools. Don't add extra divs unless you really need them and try to be really consistent in your use of margin/padding

    Marked as helpful
  • Raajzz•70
    @Raajzz

    Hello Hamzat, your solution was amazing, you especially nailed the responsiveness aspect of it, I do however wanted to share a cool property you can add for paragraphs, called line-height, this'll increase the space in between the lines of the paragraph.

    It is also recommended to use a minimum 1.5 or 1.6 as this will help people with cognitive concerns or other disabilities.

    Marked as helpful

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