Skip to content
Submitted almost 3 years ago

stats-preview-card using CSS Grid

vishwa3•250
@vishwa3
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

When screen width goes below 1000px , media query kicks in - and the bottom of the div is not visible even after completely scrolling down - Even assigning height to container-box doesn't help . Any other suggestions are welcome

Community feedback

  • darryncodes•6,370
    @darryncodesPosted almost 3 years ago

    Hi Vishwa,

    Really good effort on this one, well done!

    To answer your question, try this:

    • update height: 100vh; to min-height: 100vh; on <body>
    • remove height: 400px; from .container-box
    • i'd add some padding to your <body> too

    I also notice the border-radius was missing on one half of the design. You'll need to add it to .data-container for it to show up and pick the relevant corner to style

    I hope that helps!

    Marked as helpful
    1
    vishwa3•250
    @vishwa3Posted almost 3 years ago

    Hi Darryn - Thanks for pointing out the border-radius , have fixed the same

    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