Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Basic HTML and CSS 2

@Oscarandio

Desktop design screenshot for the Stats preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


How can I make a correct use of align items: center?

Everytime I try to center elements vertically I am not able to figure out how it works, but justify content: center works well.

Best solution to center the stats and stat headings? Thank you!

Community feedback

@KristaCalleja

Posted

Hi... I accessed your site and added this in console: body .card-container { align-items: center; height: 100vh; } Adding the height will center the card-container. Good luck!

Marked as helpful

1

@Oscarandio

Posted

@KristaCalleja Thank you for your feedback! I tried this and it works but now the container fills the whole site from up to down. I tried to fix it with margins but couldn't :(

0

@KristaCalleja

Posted

@Oscarandio Hey Óscar! I got curious and did the solution myself, check it out here: https://www.frontendmentor.io/solutions/use-of-vendor-prefixes-and-blendmode-5mBhy8B1c To center the card you need to have it standing in a container with 100vh as height and a margin set at 0 auto; See my code. Good luck!

Marked as helpful

1

@Oscarandio

Posted

@KristaCalleja Thank you for your effort. I checked it! I will try to do it again also using sass and em/rem.

0

Please log in to post a comment

Log in with GitHub
Discord logo

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