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

Responsive Result Card with Dynamic Student Data

Chetan Sainiβ€’ 90

@saini-27Chetan

Desktop design screenshot for the Results summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

Converted the static website into a dynamic website. We need to input the name of the student, and if the name is present in the data.js file, then the result will dynamically change.

**First of all, visit the data.js file for the names of the students.

Community feedback

Daniel πŸ›Έβ€’ 44,230

@danielmrz-dev

Posted

Hello, @saini-27Chetan!

Your project is looking fantastic!

I'd like to suggest a way to make it even better:

  • Using margin isn't always the most effective method for centering an element.

Here's a highly efficient approach to position an element at the center of the page both vertically and horizontally:

πŸ“Œ Apply this CSS to the body (avoid using position or margins in order to work correctly):

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

I hope you find this helpful!

Keep up the excellent work!

Marked as helpful

0

Chetan Sainiβ€’ 90

@saini-27Chetan

Posted

@danielmrz-dev Thank you for your help. I will use this in my future projects

1
Chetan Sainiβ€’ 90

@saini-27Chetan

Posted

@danielmrz-dev On giving your style, I am getting a scrollbar, so how to get rid of that? By decreasing the min-height or other?

0
Daniel πŸ›Έβ€’ 44,230

@danielmrz-dev

Posted

@saini-27Chetan

Your card is bigger than the original design. You need to remove the .container margins and make it a little bit shorter so it fits on the screen without creating a scrollbar. If you keep the margins, they also occupy space on the screen.

Marked as helpful

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