qr-code-component

Community feedback

• 

  TITOR•340

  @hectorestebanmPosted about 2 years ago

  Buenas Elena, felicidades por completar este desafío. Te faltaría sólo centrar la card en el medio de la pantalla. Me han recomendado una forma de hacerlo y quiero compartirla contigo.

  Dentro del body agrega las siguientes líneas

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

  De esa forma centrarás la card tanto horizontal cómo verticalmente.

  Otro tics que te puedo dar es que quites el margin que tienes dentro de la clase "div.qr-code", para que el footer no te quede tan separado de la card. El diseño está bien hecho, una vez más felicidades por completar el desafío, a seguir programando.

  Marked as helpful

  1

  ---

  

  Elena•60

  @ElenaKondrashovaPosted about 2 years ago

  @hectorestebanm Thanks a lot for your comment! I've updated my code with your suggestion and it works so much better. Appreciate your feedback. Thanks again :)

  0
• 

  To Dat•290

  @tltd0807Posted about 2 years ago

  Hi Elena, congrats on completing your project here! It looks very nice, In my opinion, you should use display: flex for the ".description" instead of position: absolute for the h1 and p tag. It is just my opinion, by the way, I have learned from your solution a lot. Have a nice day 😁😁

  Marked as helpful

  1

  ---

  

  Elena•60

  @ElenaKondrashovaPosted about 2 years ago

  @tltd0807 Thank you very much for your comment and insights! Indeed it works much better with display:flex :)

  0
• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello Elena, congratulations for your new solution!

  Your component is perfect, but is not responsive yet, this is due the fixed width you've applied to the container.

  Look both width and max-width the main difference between these properties is that the first(width) is fixed and the second(max-width) is flexible, for example, a component with width: 320px will not grow or shrink because the size will be ever the same, but a container with max-width: 320px or min-width: 320px can grow or contract depending of the property you've set for the container. So if you want a responsive block element, never use width choose or min-width or max-width.

  Note that there's no need to use height here, because since you set a height for an element, this means that this element will grow until a certain point and after that the inner content (as texts or images) will start to pop out the element due its fixed height, so isn't necessary to set the height the container height comes from the elements, its paddings and height.

  Think about using relative units as rem or em instead of px to improve your performance by resizing fonts between different screens and devices.Anyhow, if we want a more accessible website, then we should use rem instead of px. REM does not just apply to font size, but to all sizes as well.

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  0

  ---

  

  Elena•60

  @ElenaKondrashovaPosted about 2 years ago

  @correlucas Once again, thanks so much Lucas for your detailed explanation. I think I starting to get the responsiveness. I've tried to implement it in the solution for a new challenge :) I think I will re-do QR code entirely.

  1