Please review my local weather app, took me longer than expected and even then i am not quite sure it is completely finished yet. I am facing a weird issue with the flexbox property while trying to center my weather container exaclty in the center of the page, it centers the container alright but not in the middle of page but remains at the top and i have to give some margin to set it in the middle of the page, i am not facing the issue in the editor i am using, it works perfectly fine there but not in codepen, if anyone can solve it please i will appreciate it a lot-Thanks.
I’ve been looking at it but I didn’t find where are you adding top to the weather_container and is working just fine in my browser. One thing I realised is that I can close the modal window without selecting a city which ends with no data and there’s no possibility of opening back the modal. Anyway I’m pretty tired right now and maybe I just missed it 
Good night, tomorrow I’ll check it again. Anyway, could you be more specific in the piece of code you’re having issues with?
1 Like
For me, centering vertically with
position: absolute;
display:box;
top:50%
transform: translateY(-50%);
seems to work. You can center horizontally as well by adding a left:50% with the complete transform translate statement. I’m not sure if it’s by choice but the background image is always at the top and doesn’t come close to covering the entire page, at least on mobile.
1 Like
Thanks for taking a look. I appreciate it, and yeah @edgarshurtado i have specified the top property at the bottom just below position:relative property in the weather container, the problem is that i have already specified display:flex, align-contents:center,and justify-content:center property in the body section that should alone do it. It works perfectly in the editor i am using which is Visual Studio Code btw, but the same thing doesn’t work as expected in codepen so i had to give this stupid top property to align it properly which is causing the problem in mobile view as the background stays at the top and makes it look really weird as @imtoobose mentioned.
1 Like
I forked your project and I think I got everything aligned correctly
You forgot to add a height and width to your html, body. Hope this helps!
2 Likes
i cannot thank you enough for this, i spent a whole day trying to figure what the problem was because it was working just fine in the text-editor i was using. I appreciate it a lot.
Glad I can help! I definitely know how frustrating it can be to be stuck on something that seems like it would be so simple 
1 Like