stats preview card component whith flexbox

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  👾 Hello Mateus Moura, congratulations for your solution!

  Your solution its almost done, but note that the component isn't fully responsive and that you don't need so many media queries to manage the container content. All you need is just to fix this block-behavior over the container.

  To fix this you've to change all the width inside the container to max-width in order to allow the container contract when the window start to scale down.

  See some code fixes for you solution below:

  .container {
      max-width: 69.375rem;
  }
  
  .card {
      align-items: normal;
      /* padding: 0 6.8rem 0 4.3rem; */
      max-width: 50%;
  }
  
  }
  .image {
      position: relative;
      max-width: 50%;
  }
  
  .image::before {
      content: "";
       position: absolute;
      max-width: 100%;
  }
  

  See if works, this way you can use only one media query for the mobile design.

  Happy coding.

  Marked as helpful

  1

  ---

  

  Mateus Moura Domingos•140

  @Theuz1nh0Posted over 2 years ago

  @correlucas thank you very much for your feedback, some things you said i couldn't do, like the .image::before, because the color disappears. but thank you very much, I still have many things to improve and maybe I'm solving the challenges in the worst way possible, but I'll keep studying and trying to improve.

  about the various media queries, there comes a time when the text makes the container grow too large, so I put several

  0

  

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  @Theuz1nh0 pra deixar o texto blocado, é só colcoar um max-width pro texto e até mesmo limitar por caracteres tipo max-width: 100ch por exemplo.

  1

  

  Mateus Moura Domingos•140

  @Theuz1nh0Posted over 2 years ago

  @correlucas Ahh thank you so much, I didn't know about that

  0