Página de tarjeta de estadísticas usando html y css

Community feedback

• 

  zhansayatazhibayeva•440

  @zhansayatazhibayevaPosted 5 months ago

  good job, keep it up the only thing I want to mention is in mobile version 'vistas' should be flex-column

  0
• 

  Krushna Sinnarkar•1,100

  @krushnasinnarkarPosted 5 months ago

  Hi@Nahir13,

  Your solution is great and demonstrates a solid understanding of responsive design principles! Here are a few suggestions to further enhance the responsiveness and user experience:

  Remove text-align: center from .contenedor for Large Screens:

  • On larger screens, it's better to have the text aligned naturally . Apply text-align: center only for smaller screens.

  .contenedor {
    text-align: left;
  }
  
  @media (max-width: 830px) {
    .contenedor {
      text-align: center;
    }
  }
  

  Wrap .vistas Inside a Section and Use Flex with justify-content: space-between:

  • This will distribute the .vistas elements evenly across the available space.

  <section class="vistas-wrapper">
    <div class="vistas">
      <p class="number">10k+</p><br>
      <p class="sombra">COMPANIES</p>
    </div>
    <div class="vistas">
      <p class="number">314</p><br>
      <p class="sombra">TEMPLATES</p>
    </div>
    <div class="vistas">
      <p class="number">12m+<br>
      <p class="sombra">QUERIES</p>
    </div>
  </section>
  

  .vistas-wrapper {
    display: flex;
    justify-content: space-between;
    margin: 20px 0;
  }
  

  Feel free to reach out if you have more questions or need further assistance.

  I hope you find my feedback valuable, and I would appreciate it greatly if you could mark my comment as helpful if it was!

  0