@JeuriMorel
Posted
I personally like using clamp a lot as a way of handling responsive sizes. Don't know what widths the design calls for, but as an example I would give the card the following: width: clamp(320px, 20vw, 375px);. If you never used clamp before, the first value is the min-width, the third is the max-width, and the middle value is the preferred value. You can read more about it here. In my example it will calculate 20% of the screen width and assign that to the card, without going outside of the 320px and 375px range.
Try not using margins as a way of centering items. You've already setup the body as a flexbox, but the reason the card isn't perfectly centered vertically is that the body isn't taking up the full height. To fix this give the body height: 100vh;
Marked as helpful
@JVincee
Posted
@JeuriMorel Thank you for suggesting it. I just used clamp, and it works pretty well, making it responsive. Also, I'm having a hard time fixing how to center the items, so I used margins to center it, so thank you for correcting me.
