product-preview-card-component-main using flex

Community feedback

• 

  David•8,000

  @DavidMorgadePosted about 2 years ago

  Muy buenas Cristian, se nota como vas mejorando bastante, te quedo muy bien el card del productor, enorabuena!

  Si no te molesta me gustaría ofrecerte algunos consejos.

  • Para tu botón, deberias de añadirle un cursor: pointer para que el usuario vea y entienda que es un objeto clicable (tu siempre tienes que pensar que el usuario de tu app no sabe navegar por internet), además de añadirle algun efecto en hover como por ejemplo cambiar el background-color a cualquier otro color, esto puedes hacerlo con button:hover { background-color: /*el color que quieras*/ }.

  • Deberias de intentar hacer que te solución se vea bien también para tamaños mobile, a partir de 715 pixeles ya se rompe un poco, prueba añadiendo estilos a las clases que ya tienes con un @media(max-width: 768px) para que se vean mejor en mobile! si necesitas ayuda con esto me dices!

  • Veo que usaste la imagen que trae el proyecto para desktop, este también trae una para mobile (para que se vea mejor en mobile), puedes usar ambas si usas un <picture></picture> tag con tu img dentro y dos <source> tags, con los que puedes poner condicionalmente que imagen quieres que se vea dependiendo del tamaño de la pantalla, aquí tienes más información acerca del picture tag.

  Quitando eso hiciste un buen trabajo, si tienes cualquier duda con lo que sea no dudes en preguntar! buen trabajo y espero que mi feedback te haya sido de ayuda

  Marked as helpful

  0

  ---

  

  Cristian Eduardo Ledesma•90

  @CristianEduardoLedesmaPosted about 2 years ago

  Hi @DavidMorgade ! thanks for the help ! 👍

  1
• 

  Adriano•38,330

  @AdrianoEscarabotePosted about 2 years ago

  Hi @CristianEduardoLedesma, how are you?

  I really liked the result of your project, but I have some tips that I think you will like:

  1- Images must have alternate text, for people who use screen readers to understand what is being displayed. click to read about it

  2- You forgot to make the project adapt to mobile resolutions, you can find the photos of the example layout in the mobile version, in a folder called 'desgin'.

  The rest is really good! Hope it helps... 👍

  Marked as helpful

  0

  ---

  

  Cristian Eduardo Ledesma•90

  @CristianEduardoLedesmaPosted about 2 years ago

  Hi @AdrianoEscarabote , thanks for your tips ! 👍👍

  0