3-column preview card component

Community feedback

• 

  Kamasah-Dickson•5,590

  @Kamasah-DicksonPosted over 2 years ago

  You nailed it I really like your solution. Spacing is great, texts are also readable.

  Good job 👍

  Marked as helpful

  0

  ---

  

  Geraldo Ventura•90

  @GeeraldvPosted over 2 years ago

  @Kamasah-Dickson Thanks for your review.✌🏻

  0
• 

  Danilo Blas•6,300

  @Sdann26Posted over 2 years ago

  Buen trabajo Geraldo, la transción esta bastante bien y bien aplicado las media queries. Podrías mejorar un poco el diseño si le das menos padding en la parte de arriba y abajo y haciendo que los titulos queden un poco más grande en cada card.

  Respecto al reporte, el div con la clase container lo puedes cambiar por un main y ya solo quedaría ponerle un h1 dentro del main con el titulo que quieras. Al h1 basta que le agregues la clase sr-only que significa (Screen Reader Only) que hará que no se vea en tu diseño pero este presente. La clase tendrás que darle los siguientes atributos:

  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
  }
  

  Ya con esto no debería salirte ningun error en el reporte cuando generes uno nuevo y utiliza este truco en otros proyectos donde lo necesites. En realidad esto sirve para que al usar un lector de pantalla este detecte el texto (puede que sea un texto más explicativo que no quieras que se vea en el diseño final de la página) y lo lea para gente invidente.

  Igualmente muy buen acabado, éxitos!

  Marked as helpful

  0

  ---

  

  Geraldo Ventura•90

  @GeeraldvPosted over 2 years ago

  @Sdann26 Muy buena reseña voy a intentar aplicar lo que explicas, gracias!!

  1