Skip to content
Submitted over 3 years ago

State preview card component using responsive Grid/Flexbox/CSS

Mathew•10
@MatCre
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

Hi there, I would like some feedback on the code I used to handle the responsiveness and the behaviour of the image and the card on desktop. It feels like I over complicated such a simple component. Any other feedback would be bonus. Cheers

Community feedback

  • Nilanshu V Rajmane•125
    @nilanshu96Posted over 3 years ago

    Props for trying to be as close to the design as possible. There are few mistakes I see here:

    • Your card appears smaller in a 1440px screen. The design screenshot provided for the challenge is for a 1440px screen. Scaling everything relatively should fix it so no big issue.
    • I'm unable to scroll in mobile view so a part of your card gets cut off which is also easily fixable Apart from these you've done great.
    0
    Mathew•10
    @MatCrePosted over 3 years ago

    @nilanshu96 thanks for the feedback. I am going to change how I screenshot I think in my next challenge and use a tool rather than ms paint. I forgot to think about mobile scrolling, thanks I have added the fix.

    0
    Nilanshu V Rajmane•125
    @nilanshu96Posted over 3 years ago

    @MatCre I didn't mean that. I mean the design that's provided in the challenge is based on a 1440px screen. When I viewed your website in a 1440px screen, the card appeared small.

    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