Skip to content
Submitted about 2 years ago

HTML and CSS

viorel7774•30
@viorel7774
A solution to the Results summary component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hi,

Finished my first solution for my first challenge. I used HTML and CSS (no flex and grid yet). Can someone give me an idea how to center the main container to be aligned with the design?

Code

Please log in to post a comment

Log in

Community feedback

  • Arne•1,140
    @Dudeldups

    Hello 👋🏻

    The design itself looks close to the original but there are some flaws in your code. I also recommend starting with smaller challenges to get the basics right. This way you are not going to form bad habits.

    Here are some tips to improve your solution:

    • Look for a modern CSS reset to have a proper basis to work on.

    • The media query for 375px is way too small. Look at the site with your browser's developer tools and adjust the number

    • This challenge does not need any position: absolute. You can just center the container in the middle of the page with flexbox or grid.

    • Heading elements should be in descending order. Do not use heading elements just because 'they look like a heading element in the design'. When you reset everything with a proper CSS reset, you can define all the font-sizes to your liking.

    Hope this helps and happy coding 👾

    Marked as helpful

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