Skip to content
Submitted over 1 year ago

Stats Preview Card using Grid, Flex, Root, & Pseudo-element

raf_0411•160
@raf0411
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

I'm having problem with the div won't centered using the display: grid and place-items: center.

Your feedback would be appreciated...

Community feedback

  • Abdul Khaliq 🚀•72,580
    @0xabdulkhaliqPosted over 1 year ago

    Hello there 👋. Congratulations on successfully completing the challenge! 🎉

    • I have other recommendations regarding your code that I believe will be of great interest to you.

    iMAGE BLEND 📸:

    • The header image is not properly blended with the primary color of this website
    • Just quickly resolve it by adding mix-blend-mode property to the image and add the violet color as the background for the image container
    • Example:
    picture {
background: var(--clr-primary-500);
}

picture img {
mix-blend-mode: multiply;
opacity: .75;
}
    • After these steps you can remove the entire ::after styles for picture element to make the code more cleaner and reusable!
    • Now you got the desired result where the image is perfectly blended with the background violet, and the result will accurately match the design image

    .

    I hope you find this helpful 😄 Above all, the solution you submitted is great !

    Happy coding!

    Marked as helpful
    1
  • Ed-dyb Abdelilah•1,560
    @eddybproPosted over 1 year ago

    Hi, raf0411

    Congratulation on finishing this challenge, I hope it was fun.

    You did a good job, centering the div you already answered it, you just need to add the min-height property like this:

    • CSS code:
    main{
min-height: 100vh;
display: grid;
place-items: center;
}

    Tha's it, GOOD LUCK IN YOUR JOURNEY

    Marked as helpful
    1
  • Mamadou Mar•550
    @Mar1362Posted over 1 year ago

    Hi hope you're doing well! your wrapper is not centered vertically because the body element, by default, only get a minimum content height. <body> element doesn't fill the full page height by default it just get the required height to show the content inside it. In order to force it fill the full viewport height you should add the following line inside your body selector: min-height: 100vh. Indeed, by making it fill the full viewport height, if you vertically center his content it will appears right in the middle of the viewport (the page) height. here is an opportunity to learn about some extra css units like vw vh em rem etc. Try it friend. Happy Code! :)

    Marked as helpful
    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