Results summary component main (Solution)

Community feedback

• 

  Andrés Gutiérrez Ramírez•2,470

  @AGutierrezRPosted over 1 year ago

  Hello there 👋. Good job on completing the challenge!

  I have some suggestions about your code that might interest you.

  HTML:

  • You could replace the .text and .numbs paragraphs with <span> tags. This could be more semantic because is not a paragraph per se.
  • Try not to use the <main> tag as a component, use it as a container that will wrap the component in question.

  CSS:

  • Try not set a fixed width, use max-width instead (style.scss line 10). If you want to limit set a minimum width you could do that also.
  • Let the content define the height of the .your-result element, you could use padding and margins for the children to achieve this. And of course, the .your-result padding is a must.

  Marked as helpful

  2
• 

  Vincent•70

  @BatestickroPosted over 1 year ago

  Hello Luciano! Excellent job coding this design.

  Looking at your code I just notice that you are repeating code in the media queries, for summary and your-result classes, and it is not necessary, mediaqueries allow you to keep your current styles and you can just overwrite or add the ones that you need.

  .summary{
          display: flex;
          align-items: center;
          flex-direction: column;
          box-shadow: 11px 16px 20px -12px #00000026;
          border-radius: 15px;
  
  @media (min-width: 768px)
  main .summary {
              display: flex;
              align-items: center;
              flex-direction: column;
              box-shadow: 11px 16px 20px -12px #00000026;
              border-radius: 15px;
              margin: unset;
              padding: 0 10px;
              width: 300px;
  }
  
  //you can just in the mediaquerie add the styles you need 
  @media (min-width: 768px) main .summary {
              margin: unset;
              padding: 0 10px;
              width: 300px;
  }
  

  Also In the main element you added a flex-direction: row, you can skip this step since row is the default value for flex-direction, you can just set display=flex and it will be automatically be set it to row.

   main{
          display: flex;
       /*   flex-direction: row;  */ this one can be skiped since is the default.
          width: 600px;
          margin: unset;
          padding: 10px;
  

  All of this is in order to reduce code, because less code is easier to read and maintain overtime.

  I hope you can find this useful and happy learning :)

  Marked as helpful

  1