Responsive rating card

Community feedback

• 

  Danilo Blas•6,300

  @Sdann26Posted over 2 years ago

  Raul, que tal!

  Un truquito para centar los elementos sin necesidad de hacer con margenes o position es usando flex y al ver que la tarjeta para puntuar esta en el medio puedes hacerle lo siguiente al body, agregale estos atributos:

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2em;
  min-height: 100vh;
  

  Obviamente tendrías que quitarle al div con la clase attributión el position y a la tarjeta los margenes.

  Además mete los dos div que hay dentro del body dentro de la etiqueta <main>, siempre debes añadir esta etiqueta y ponerle el contenido principal de tu página. Por otro lado cambia el h2 por un h1, el motivo es porque toda página debe tener un h1 y además al colocar h2 a más debe ir siempre de manera incremental, como si fueran subtitulos ya que lo son, usalos como eso más que para agregar un tamaño o algo similar.

  Te recomiendo revisar el reporte y mientras más vayas arreglando los cambios actualizalo para ver si siguen los errores y así limpias el reporte ya que ayuda a no cometer esos errores.

  Por cierto el diseño te ha quedado bastante bien agregale a los efectos de los botones transiciones para que el cambio de color no sea brusco por ejemplo transition: all 200ms :D

  Good Coding!

  0