NFT Preview Card

Community feedback

• 

  Danilo Blas•6,300

  @Sdann26Posted over 2 years ago

  Luis!! Te ha quedado bastante bien el reto solo que el centrado no esta del todo bien porque la usar grid este intenta que todos tengan el mismo tamaño ambas cajas y tambien no has considerado el tamaño completo de altura.

  Te recomendaría quitarle el grid al body y agregarle esto.

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

  Te ayudará a que este centrado en todo tipo de pantalla verticales, tomas mínimamente todo el tamaño de pantalla vertical y lo centras en ambos ejes además que elijes que sea columna para que salga el atribution debajo de la card.

  Te recomendaría tambien agregarle la transicion tanto al nombre del NFT y al nombre del usuario y por ultimo hace el ojo un poco más pequeño.

  Sigue la recomendación anterior y esta y creo que te quedaría 10 de 10 y sin ningún problema en el reporte al generar uno nuevo :D

  Marked as helpful

  0

  ---

  

  Luis Malquiel Hernández Avendaño•40

  @MixhetlPosted over 2 years ago

  @Sdann26 Muchas gracias amigo. Todavía no entiendo bien los conceptos del Viewport. Pero sigo estudiado. Aplicare esto. Creo que debo usar Flexbox más seguido. :D

  1

  

  Danilo Blas•6,300

  @Sdann26Posted over 2 years ago

  @Mixhetl a ya masomenos viewport toma todo el tamaño de pantalla si lo colocas 100vh o 100vw, el primero es para la altura y el segundo para el ancho entonces 100vh es 100% de la altura de la pantalla actual y 100vw es 100% del ancho de la pantalla actual. Así que si pones 50vh, sería el 50% de la altura del dispositivo que se use para ver la página.

  Eso si debes tener cuidado al usar el 100vw porque toma toda la pantalla osea lo que se ve y el scroll por eso a veces te genera un scroll horizontal por eso recomiendo solo en ese caso usar 100% que toma el ancho total que si es un hijo dentro del body principal no tomaría el scroll.

  Y si usa según convenga flexbox o grid, en lo personal flex me parece más sencillo de usar pero para gustos colores, yo he maquetado bastante sin saber grid y actualmente lo domino masomenos bien ya que es bastante útil.

  No olvides que apenas corrijas el código generar un nuevo reporte para ver si se eliminaron todos los errores.

  0
• 

  Ahmed Bayoumi•6,740

  @Bayoumi-devPosted over 2 years ago

  Hey Luis,

  My suggestions:

  • Document should have one main landmark, Contain the component with <main>.
  • Page should contain a level-one heading, Wrap <a href="#">Equilibrium #3429</a> with h1

  <h1><a href="#">Equilibrium #3429</a></h1>
  

  You should always have one h1 per page of the document... in this challenge, you will use h1 just to avoid the accessibility issue that appears in the challenge report... but don't use h1 on small components <h1> should represent the main heading for the whole page, and for the best practice use only one <h1> per page. There are six levels of section headings <h1> to <h6>

  • There is a CSS property for shadow ---> CSS box-shadow Property

  Hope this help!... Keep it up👍

  Marked as helpful

  0

  ---

  

  Luis Malquiel Hernández Avendaño•40

  @MixhetlPosted over 2 years ago

  @Bayoumi-dev Thanks for your feedback :D. I didn't think that posibility "box-shadow". I use right now.

  0