All comments

• 

  João Pedro de Oliveira• 120

  @jaojogadez

  Submitted 10 months ago

  Hello, I'm a beginner, this was my third challenge on this platform, I had more difficulty with this one compared to the others. I have a question, in my solution, in the icons part (Reaction, Memory, Verbal, Visual) for some reason, on the right side of the number "100" there is a gradual spacing, which I was unable to resolve and align them. If anyone could explain it to me, I would be grateful. Thank you very much and I am subject to other tips and suggestions.

  

  Results Summary Component Challenge

  3

  60

  

  P

  Logan Sawyer• 30

  @lgndev

  Posted 10 months ago

  Hi, great job on your third application!

  Bryan Li gave a pretty good overview of why the summary results are not aligning to the right . Here is another way you could resolve this issue:

  <div class="icon1">
     ...
     <div style="margin-left: auto">
        61 / <a style="color: gray;">100</a>
     </div>
  </div>
  

  Here we are wrapping the html in a div and adding a margin-left of "auto". This will align just the bit of code wrapped in the div to the right. I do think it is worth your time learning flex, but this requires a bit more knowledge. Working with margins might be an easier topic to pick up for beginners.

  There are a few things I would like to point out as well:

  • The solution is not responsive. Responsive design is a big part of web development. When you have time, you should get more familiar with this topic. Media queries and mobile first design are good places to start
  • The markup for the scores (i.e 61/100) could be better. It is not semantic to use a tags in this way. a tags are used to denote a hyperlink
  • Suggested update

  <p>61 / <span style="color: gray;">100</span></p>
  

  I know there are some styles in your style sheet that would add unwanted padding to the above solution. Can you think of a way to make the above code work with these styles?

  Overall, great job! Keep it up!

  0