LibenS10• 30
@LibenS10
Submitted
Ugo Francis
@Vanfrankie7
All comments
- Ugo Francis• 40
@Vanfrankie7
Posted
Yo bro, i had the same issue of my container sticking at the top of the view port. i just put min-height: 100%; on the <body> tag which is the direct element of my flex container. And it worked perfectly.
Take a look at my code;
body { font-family: "Inter", sans-serif; font-size: 14px; color: hsl(0, 0%, 100%); background-color: hsl(0, 0%, 8%); display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; padding: 20px; }
.container { display: flex; flex-direction: column; justify-content: center; gap: 15px; padding: 25px; margin: 0 20px; border-radius: 9px; background-color: hsl(0, 0%, 12%); max-width: 375px; }
Try it out and see.
0 - LibenS10• 30
@LibenS10
Submitted
Ugo Francis• 40@Vanfrankie7
Posted
The container is not vertically centered in the viewport. Maybe margin: auto; in the container?
0 - MustafaKole• 20
@kmustafa0
Submitted
Ugo Francis• 40@Vanfrankie7
Posted
Nice job getting nearly the exact height and width. You forgot to align your h1 to the center.
1 - Asledin-max• 100
@Asledin-max
Submitted
What are you most proud of, and what would you do differently next time?
Hello there, this is my first code challenge for any feedback you welcome.
Ugo Francis• 40@Vanfrankie7
Posted
Great job Asledin, I noticed that in the desktop version, the container (card) is stuck at the top of the screen. No margin at the top. You could add a margin at the top to see if that would solve the issue.
0
