Css puro Flexbox HTML Simple

Community feedback

• 

  P

  Daniel 🛸•44,800

  @danielmrz-devPosted about 1 year ago

  Hello @DavidRM077!

  Your project looks great!

  I have one suggestion for you to improve it even more:

  • I noticed that your card is not vertically centered. Here's a very efficient way to place an element in the middle of the page both vertically and horizontally:

  📌 Apply this to the body (in order to work properly, don't use position or margins):

  body {
      min-height: 100vh;
      display: flex;  /* it works with grid too  */
      justify-content: center;
      align-items: center;
  }
  

  I hope it helps!

  Other than that, great job!

  Marked as helpful

  1
• 

  Juan Camilo Botero•970

  @jcboteroPosted about 1 year ago

  Hola David. Muy bien resuelto el challenge. Sobre posicionar/mover elementos, quizás lo que más me guste es usar el Flex-Box. No sé si lo usaste porque está caído el link de tu repositorio, pero sería algo así :

  A tu contenedor principal, le pones = display: flex ; Justifiy-content : center

  La segunda propiedad te da muchas más opciones, puede ser space-between si quieres que se separen a los largo del contener, o space-around para separarlos copando mejor los espacios, entre otras. También puedes organizar todo lo que está dentro del contenedor principal en formal de columna o filas. Es una gran herramienta para explorar

  Es si, tengo cuidado en no usar mucho el margin para posicionar elementos. Es mejor usar en el width : vw, o sino el rem. Son más responsive y se adaptan mejor a diferentes tamaños de pantallas.

  Espero te haya sido algo útil

  Saludos!!

  1