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 results summary card

@nina1234567896

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


Any kind of feedback will be appreciated =)

Community feedback

@matiasluduena23

Posted

Hi @nina1234567896! good work! Just one advice. try to use one h1 tag in all your main content. Maybe you can use it in your "result" title. And like Mario said if your put min-height:100vh in your body, your card is goint to center. Because you have done well with display:flex; align-item; justiify... but you don't have any height so it is imposible to center the main content. Try to use a height when you want to center things

good code!

Marked as helpful

2

@nina1234567896

Posted

@matiasluduena23 thankyou this was well explained! I got the trick from one of the previous comments from another project but didnt think of the importance of adding a min-height!

1
TRES 90

@Tre3s-byte

Posted

Hi Nina,

Overall, it is greatly done. I only have a few specific recommendations:

  • It's a good practice to add a "description" meta tag to improve visibility in search engines (SEO).
  • Consider moving the styles related to legal information to "styles.css" for better organization.
  • Reusing classes is beneficial to minimize code and improve clarity, especially in large projects when collaborating with coworkers. You may want to explore naming methodologies like BEM (Block Element Modifier) to enhance readability.

=) I hope you find this useful!

Marked as helpful

1

@nina1234567896

Posted

@Tre3s-byte Thankyou! I am not sure what you mean by the second point?i will defs read about BEM. I am working on trying to write less code b grouping elements with similar styles into classes.

0
TRES 90

@Tre3s-byte

Posted

@nina1234567896 Hi there! hahaha Right, I'm sorry. I meant to say 'move attribution styles' that are still in your HTML.

0
P
doublem 620

@MarioMinchevski

Posted

Hi there!

Quick tip on how to center your class="main" in the center of the screen:

  • make the display of it's parent (in your case the body), display:grid;.
  • after that you can position the content in the center by using place-content:center;
  • if it does not center it, make sure to give the body a min-height: 100vh;

Hope this helps, happy coding!

Marked as helpful

1

@nina1234567896

Posted

@MarioMinchevski i will defs try using grid next time !=) Thankyou for your advice.

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