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

results-summary-component-main

@MetehanToper

Desktop design screenshot for the Results summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

@bally4h

Posted

Hi!

I think you are on the good way! I want to suggest only a few thing at this stage.

To have a responsive page, instead of using absolute units, pixels etc.., it is more advanced to use relative units (rem, em, %, ...)

You tried to push down your container from the top, like this:

   .conteiner{
        margin-top: 120px;
       
   }

Yous should try flexbox or grid to reach ypur goals easily.

I think 2 rows with grid will do the job for you. With this code you make the body a grid container and your "conteiner" will be absolutly centered, and no need to use margin-top and pixels..

The code is:

body {
  display: grid;
  place-items: center;

}

An other suggestion, it is always good to familiarize yourself with the separeted style.css file. If your html code stretch longer and longer, it will be easier to read and manage the separated file and add some comments.

I wish you the best!

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