Tarjeta tres componentes

Community feedback

• 

  David•8,000

  @DavidMorgadePosted about 2 years ago

  Muy buenas Carlos, enorabuena por terminar la solución para este challenge, te quedo estupendo!!

  Si me permites darte un consejo para tus proximos challenge.

  Si quieres centrar todo el contenido en medio de la página, puedes hacerlo con flex en el body en vez de ponerle margin al main, prueba por ti mismo y me cuentas, lo unico que tienes que hacer es darle un min-height de 100vh al body y centrar con flexbox así:

  body {
    margin: 0;
    padding: 0;
    font-size: 16px;
    font-family: var(--FuentePrincipal);
    background: var(--BlancoOscuro);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    flex-direction: column;
  }
  

  Y ya te quedaría todo centrado.

  Muy buen trabajo y espero que mi feedback te sea de ayuda!

  Marked as helpful

  0

  ---

  

  CARLOS ALBERTO MARTINEZ FLOREZ•200

  @camaflo87Posted about 2 years ago

  @DavidMorgade hola y gracias por ayudarme, te quería preguntar si tienes algún link a un video o materia que explique el uso de Vh tanto en min.width como max-width.

  0

  

  David•8,000

  @DavidMorgadePosted about 2 years ago

  @camaflo87 Buenas Carlos, no tengo ningún material en video o escrito pero puedo explicartelo yo más o menos así por encima.

  Los vh normalmente no se suelen usar en el mundo real, pero en este caso tu quieres crear un componente (en este caso un Card) y te interesa que este card se encuentre en el centro de la pantalla.

  Para centrarlo en la pantalla, ya sabes de antes que con flexbox en un elemento, podemos centrar todos los elementos hijos usando align-items: center y justify-content: center, pero si hacemos esto sin usar vh, los elementos no se centrar correctamente, ya que gracias a estos 100vh, el body ocupa toda la pantalla por lo tanto el centro del body, es el mismo que el centro de la pantalla.

  Para el min y el max, simplemente tienes que tener claro que cuando se declara un min-height significa que el tamaño va a ser mínimo ese, es decir, que nunca va a poder ser más pequeño que ese valor, en el caso de max-height, el valor nunca va a poder ser mayor a ese, puede medir por ejemplo solo 10 pixeles y tener un max-width: 500px que el objeto seguira midiendo 10pixeles, pero si este crece de alguna forma, nunca va a pasar esos 500px

  Espero haberme explicado correctamente, cualquier cosa me dices!

  0