Skip to content
Submitted about 2 years ago

Stats Preview Card

CharlieeLuna•260
@CharlieeLuna23
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Stats preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hello, everyone!

This one gave a challenge with the purple tint in the background image but I was able to find a solution.

Also had issues with styling my stats div but was also able to come up with a solution.

Any feedback is appreciated since I still have a lot to learn.

EDIT: I have no idea why my screenshot looks weird here in Front End Mentor. EDIT 2: I have solved the issue with the screenshot thanks to some feedback from here.

Community feedback

  • Hyron•5,870
    @hyrongennikePosted about 2 years ago

    Hi @CharlieeLuna23,

    Congrats on completing the challenge, the stats are currently overflowing outside of it's parent container remove the height: 45vh on the .main-card don't set a fixed height unless there's a good reason the height will be determined by the content, padding, margin etc.

    1
    CharlieeLuna•260
    @CharlieeLuna23Posted about 2 years ago

    @hyrongennike Thanks, I will go ahead and look into that. It's just that everywhere else looks good but here.

    0
  • Harsh Kumar•1,390
    @thisisharsh7Posted about 2 years ago

    Hey CharlieeLuna, well done! Although your solution looks nice, there is one improvement that could be made so that the stats container does not go outside the main container, that is, by removing padding from .information-div{ padding: 70px; } and set-height from .main-card{ height: 45vh;}.

    I hope you find this useful..

    1
    CharlieeLuna•260
    @CharlieeLuna23Posted about 2 years ago

    @thisisharsh7 Thanks, will go ahead and try that!

    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