Skip to content
Submitted over 2 years ago

Stats preview component - Flexbox , Grid , Media queries

Francisco Prado•80
@franciscoprado4
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

This challenge was hard, especially on the responsive style. I lack of these skills so badly, but overall i think i did well.

Any feedback is welcomed.

Special thanks to: @melwynt and @Abdurehman420 that i think solve my problem with some tools that suggested me. Overall, thanks to all that have been helping my previous challenges.

Regards to y'all.

Community feedback

  • Nguyen Nguyen•340
    @jesuisbienbienPosted over 2 years ago

    Hi Francisco,

    Your solution looks great. However, on mobile view, the .title-text is too big that it pushes the image up. Hence, the image is partly cut-out. I've tested out different font sizes for the title-text and it seems 1.8rem would look closest to the design.

    .title-text {
font-size: 1.8rem;
}

    If you're using Chrome, in developer tools, there's a tool that you can use to check your website under different types of devices and viewports - toggle device toolbar (it looks like a phone and tablet). I believe it looks the same in Firefox too.

    I hope this helps.

    Jenny

    0
    Francisco Prado•80
    @franciscoprado4Posted over 2 years ago

    @jesuisbienbien Thank you for your feedback. I need to improve responsiveness a lot. Especially with images, that resize like crazy.

    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