Submitted 5 months ago

result summary component with SCSS and Handlebars.js

#sass/scss#handlebars

Fadhil Suheri• 100

@ifumikuah

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

This is a solution for...

Results summary component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

playing with scss and handlebars templating

i think my SCSS is still messed up, suggestions about that are very welcome 🙏

others suggestions are welcome too!

Community feedback

Rebecca Padgett• 1,680

@bccpadge

Posted 5 months ago

Hello @ifumikuah. Congratulations on completing this challenge!!!🎉

To center your component in the middle of the page you can use Flexbox or CSS Grid on the <body>

Flexbox

body{
 display:flex;
 justify-content:center;
 align-items: center;
 min-height:100vh;
}

CSS Grid

body{
 display:grid;
 place-content: center;
 min-height:100vh;
}

Here is my solution to this challenge Result summary component

I hope you find this useful and don't hesitate to reach out if you have any questions

Marked as helpful

Daniel 🛸• 40,900

@danielmrz-dev

Posted 5 months ago

Hello @ifumikuah!

Your project looks great!

I noticed that you used margin to place the card in the middle of the page. Here's a very efficient way to center the card:

Apply this to the body (in order to work properly, don't use position or margins):

body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

I hope it helps!

Other than that, great job!

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