Stats Preview Card using Grid, Flex, Root, & Pseudo-element
Design comparison
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
- @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 forpicture
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 helpful1 - @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 themin-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 helpful1 - @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 helpful1
Please log in to post a comment
Log in with GitHubJoin 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