Esteban• 150
@ehmenzala
Posted
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 theheightproperty (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
@joaojgabriel
Posted
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 bothflexand100vhjust in case). - I solved both the image stretching and the overflow of text by 1. using
flexwithflex-direction: columnin the card and 2.flex: 0 1 28.8remfor the QR code (instead of explicitly statingwidthandheight, as you mentioned). - As a bonus, I changed the margins and padding to percentages of the
widthof the card, making it more responsive in very thin screens.
0
