QR Code Component

Community feedback

• 

  Esteban•150

  @ehmenzalaPosted over 2 years ago

  Hello João!

  • I think you have done well making this card responsive.
  • Also, semantic HTML is well used.

  Some things you should consider...

  • Maybe you could use max-width: 100%; property on your image to prevent it from stretching when viewport width is being reduced, and remove the height property (Assigning a width to your image will kind of auto-render the height of it, so it will always look good).
  • Also, I think it's ok to use flexbox to center the card. There are various methods to center elements in CSS, and using Flexbox is one of them.

  Good luck! 👋

  Marked as helpful

  1

  ---

  

  João Gabriel•340

  @joaojgabrielPosted over 2 years ago

  Hola, Esteban. :)

  • I already had max-width: 100% for the image in the restart ; it didn't do the trick.
  • My question about Flexbox was actually if I should use it inside the card (btw, my preferred method to center elements is with grid, but when I stopped using it alongside 100dvh, the screenshot stopped being wonky -- now I don't know which made the difference, but use both flex and 100vh just in case).
  • I solved both the image stretching and the overflow of text by 1. using flex with flex-direction: column in the card and 2. flex: 0 1 28.8rem for the QR code (instead of explicitly stating width and height, as you mentioned).
  • As a bonus, I changed the margins and padding to percentages of the width of the card, making it more responsive in very thin screens.

  0