Submitted about 1 year ago

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

raf_0411• 120

@raf0411

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Stats preview card component

HTML
CSS

1newbie

View challenge

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,660

@0xabdulkhaliq

Posted about 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

Ed-dyb Abdelilah• 1,560

@eddybpro

Posted about 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

Mamadou Mar• 550

@Mar1362

Posted about 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

Please log in to post a comment

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