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

stats-preview-card

akaFatma 40

@akaFatma

Desktop design screenshot for the Stats preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

@its-rkravi

Posted

Congratulations @foufoue for completing the challenge.

Welcome to the Frontend Mentor Platform. I want to give you some feedback regarding your code. Inside the style.css file. your component is not center properly. So you need to do some changes in your CSS file.

you create a section which is inside the body.

you give some styling to the body which is given below.

body
{
display: flex;
justify-content: center;
} 

just remove these two properties we don't need them.

justify-self: center 
margin: 6rem auto

first of all you need to give a height to this body. like 100vh. and whatever the content which is inside the body is centering horizontally. Along with this you also need to center it vertically. So for this you need to write the code which is given below.

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

Few Tips:

Using Flexbox or Grid to center elements can offer several advantages, including better responsiveness, cleaner code, and improved compatibility. Additionally, it promotes the adoption of best practices in web development.

Use more modern and flexible techniques like Flexbox or Grid for layout purposes. These CSS features are designed to make web development easier, more maintainable, and responsive across various devices.

I hope you find this feedback helpful.

Keep up the excellent work, and if you have any further questions or need assistance with anything, feel free to ask.

Mail : [email protected]

Instagram : its_rkravi

Together, we can continue to build a supportive and knowledgeable community.

Best regards, Rahul Kumar Ravi

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