NFT preview card component using CSS

Community feedback

• 

  Danilo Blas•6,300

  @Sdann26Posted over 2 years ago

  Hola gaby!

  Felicitaciones por acabar tu segundo reto, has implementado varias cosas bien del proyecto lo cual me agrada, desde las transiciones, maquetado, los colores y ningún error en el reporte.

  Algo que puedo agregar es que no recomiendo que hagas que tu card tenga un porcentaje en este caso porque se va achicando mientras achicas la pantalla y por lo menos en este reto no es muy necesario porque pierde estetica.

  En mi caso te voy a dar algunos detalles para que implementes y me dices que tal te queda.

  A la clase card. quitale todo el margen y cambia el max-width por max-width: 340px. Le quitamos el margen porque luego lo centraremos con flex como en el comentario que te hice en el primer proyecto y le ponemos este max-width para que sea constante el tamaño y no crezca.

  Ahora al main le daremos las siguiente propiedades para centrarlo:

  main {
  
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
  
  }
  

  Masomenos ya sabes como funciona le damos una mínima altura del tamaño de toda la pantalla y lo centramos en ambos ejes gracias a flex.

  Por cierto al body le quite el max-width para que cuando se agrande a más de 1440px igual pueda estar centrado. Entiendo que capaz lo pusiste porque te recomiendan que para 1440px tenga tal diseño pero esa medidas que da frontend mentor significan que se vea bien como en el diseño en esa medida no que luego ya no tengan estilo, lo mismo para cuando te dan diseño mobile y te dicen 375px, osea debe mostrarse bien y así como en el diseño pero no significa que apenas sobrepase esa medida pasa al diseño en desktop, masomenos tu elegis en que momento siente que ya el diseño de mobile no debe ser y pasar al de tablet o al de escritorio. Osea estos detalles cada vez te darás cuenta con la experiencia así que tranqui de poco a poco serás mucho mejor.

  De nuevo felicitarte por no tener errores en el reporte y que te halla quedado bastante bien.

  Sigue así, éxitos.

  Marked as helpful

  0

  ---

  

  Gabriela•60

  @Gabriela-hub-89Posted over 2 years ago

  @Sdann26 oh wow! muchísimas gracias, me ayuda mucho este feedback para seguir adelante. Y me pone muy contenta ya que este reto me costó muchísimo poder terminarlo, incluso lo hice tres veces. Ahora mismo hago las correcciones necesarias.

  1

  

  Danilo Blas•6,300

  @Sdann26Posted over 2 years ago

  @Gabriela-hub-89 jejeje yo llevo un año y medio desarrollando frontend y actualmente voy por mi cuarto mes trabajando en una empresa, solo dale con constancia e intenta mantener buenas practicas y siempre repasar tus fundamentos así vas a codear más rápido y con menos fallas :D!

  0

  

  Danilo Blas•6,300

  @Sdann26Posted over 2 years ago

  @Gabriela-hub-89 jejeje yo llevo un año y medio desarrollando frontend y actualmente voy por mi cuarto mes trabajando en una empresa, solo dale con constancia e intenta mantener buenas practicas y siempre repasar tus fundamentos así vas a codear más rápido y con menos fallas :D!

  0
• 

  Marko Lukesevik•200

  @MarkoLukesevikPosted over 2 years ago

  Nice work Gabriela, the easiest way to center the card is to use display flex, align-items: center, justify-content: center on the main tag. You can also try with margin: calc(50% - half of the card height) auto. Calc can work with any positioning too e.g. absolute, relative... Hope this was helpfull. Keep up the good work!

  0

  ---

  

  Gabriela•60

  @Gabriela-hub-89Posted over 2 years ago

  @MarkoLukesevik it helps a lot, thank you very much for the feedback, I always forget how to center a card in the body.

  1