Results summary component

Community feedback

• 

  Luis Jimenez•760

  @LuisJimenez19

  Posted over 1 year ago

  Hello! Congratulations on completing the challenge.

  Regarding your question, I think you haven't used many unnecessary classes, I think that's fine. With practice you get better, there are also tools like PostCSS that optimize your code and eliminate the classes that you are not using and/or add prefixes to make it more compatible with other browsers but that is another topic.

  I can see that the responsive is not very good, I would recommend using the "mobile first" methodology to make it easier for you. You can notice when the width of the window or screen is 500px or so, the layout is damaged, what you could do is something like this:

  .container {
       width: 90%; /*As you already added a maximum width then it occupies the spaces well*/
       max-width: 38rem;
       margin: self;
       display: flex;
       flex-direction: row;
       margin: 0;
       height: 70%;
       max-height: 30rem;
       border-radius: 1rem;
       background-color: white;
       filter: drop-shadow(1rem 1rem 1rem #e3e3e3 );
  }
  

  And since you've already done it this way, one of the ways I can think of is to do this:

  @media (max-width: 580px)
  .container {
       flex-direction: column;
       width: 100vw;
       height: max-content;
       margin: 0;
       padding: 0;
       max-height: none;
  }
  

  You have done a great job, I hope I have helped you, greetings.

  00

  Marked as helpful