@ovidiuantonio
Posted
Hello Chris,
Very nice solution! You did a very good job!
I have a few tips that can help you making this solution even better:
- add a
max-widthandmargin: 0 auto;to the main container, because on a bigger screen the text and the card are not anymore in the center of the page - you can add
cursor: pointer;to the "Terms and services" too, for a better UX - and don't forget to add the shadows to the purple container and the form
Happy coding and keep going!
@Chris94Lee
Posted
@ovidiuantonio Thank you.
I completely forgot to check for bigger screens than 1440.
What would the best way to center the main container vertically? As I added in your suggestion with margin and max width, but I'm unsure on the best way to center it vertically.
The way I'd usually do this is just set height:100vh. Is this bad practice, or is there a better way to do it?
@ovidiuantonio
Posted
@twister896 if you want to center it horizontally and vertically at the same time you can use position absolute.
On the body you can add min-height: 100vh; and position: relative;
On the mainContainer you can add position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
(and forgot about th max-width and the margins you applied on the mainContainer)
