@FluffyKas
Posted
Hey, your solution looks good! If you wanted to fix the few issues you have, here's how you could do it:
-
As mentioned above, using a max-width will make it responsive.
-
To fix the background, add
background-size: contain
. -
To center the card, use these on the body:
min-height:100vh
,display: grid
andplace-items: center
. With this you can get rid of that margin-top as well.
In general, using max/min-width instead of width and min/max-height instead of height is more useful. I'd also just avoid setting height unless it's really necessary (like it is on the body but probably unnecessary anywhere else).
Marked as helpful
@phtevenclarkos
Posted
@FluffyKas thank you very much for the feedback this was very helpful, as stated above I'm making the needed adjustments to my project as per your advice. Cheers!