vertical centering
i am always getting stuck to align vertically at the center of the page,can anyone figure out to make it responsive
https://codepen.io/kvandana451/pen/yLWKEjg
27 Replies
Try "height: 100vh;" on your <body> element (I would actually probably move the selectors, etc. from <body> to your .main-content <div> - except for "font-family")
If I'm wrong, please someone with more knowledge correct me!! lol - I'm still pretty new.
I tried editing the codepen and added a
min-height: 100vh to the body and now the content is centered on the pageyes but then try for responsiveness it wont work
what do you mean when you say "try for responsiveness"?
it stays centered as you resize the screen width with just
min-height: 100vh added to the body selector
(that said, never use just vh as it'll cause weird issues on mobile, use dvh and vh as a fallback if you must)
that looks vertically centered to me?
horizontal breaks
then adjust your breakpoints
and honestly, that's a separate issue, it has nothing to do with vertically centering your content
there is no margin left as well for vertical centering,,its not a good idea to give fixed margin
adjusting the breakpoints seems the solution right,,https://codepen.io/kvandana451/pen/yLWKEjg
can anyone figure out why it is not aligned vertically with flex
there is no equal amount of space for margin top and bottom.
in the codepen it looks the same for me
if you changed anything, please update it (from the screenshots alone I can not tell)
(Thanks. I thought about that after the fact but couldn't remember what letter it was that is added. lol)
D for Dynamic 🙂 the others are Short or Long, which are with the nav bar deployed or without
Ahhh, "d" makes sense now. 😄 "with the nave bar deployed or without" - I don't quite follow this statement. Can you elaborate some on that for me?
The issue with vh is that it changes when the browser nav bar on mobile is visible
https://codepen.io/kvandana451/pen/yLWKEjg nothing changed i noticed it
well in that case, it is centered.
i havent changed anything
is the bottom side of your browser window behind the taskbar?
exactly 101% you are right
any solution? or does this matter
yea, your window is of the screen. move it up. nothing wrong with the code
can we add a static margin-top and bottom ?for low resolution <body> doesnt have spacing at the top and bottom
i read this more than once, and i don't get what the problem is
https://codepen.io/kvandana451/pen/yLWKEjg in this we can notice body is centered vertically and horizontally as well for large screen size.But when we enter mobile devices look at the bottom there is no equal margin top and bottom.Thats the issue
you're not setting any margins for mobile