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
salentipy
salentipyβ€’2mo ago
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.
tharun
tharunβ€’2mo ago
I tried editing the codepen and added a min-height: 100vh to the body and now the content is centered on the page
Vandana
Vandanaβ€’2mo ago
yes but then try for responsiveness it wont work
Jochem
Jochemβ€’2mo ago
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)
min-height: 100vh;
min-height: 100dvh;
min-height: 100vh;
min-height: 100dvh;
Vandana
Vandanaβ€’2mo ago
No description
Jochem
Jochemβ€’2mo ago
that looks vertically centered to me?
Vandana
Vandanaβ€’2mo ago
horizontal breaks
Jochem
Jochemβ€’2mo ago
then adjust your breakpoints and honestly, that's a separate issue, it has nothing to do with vertically centering your content
Vandana
Vandanaβ€’2mo ago
there is no margin left as well for vertical centering,,its not a good idea to give fixed margin
No description
Vandana
Vandanaβ€’2mo ago
adjusting the breakpoints seems the solution right,,https://codepen.io/kvandana451/pen/yLWKEjg
Vandana
Vandanaβ€’2mo ago
can anyone figure out why it is not aligned vertically with flex
No description
Vandana
Vandanaβ€’2mo ago
there is no equal amount of space for margin top and bottom.
MarkBoots
MarkBootsβ€’2mo ago
in the codepen it looks the same for me if you changed anything, please update it (from the screenshots alone I can not tell)
No description
No description
salentipy
salentipyβ€’2mo ago
(Thanks. I thought about that after the fact but couldn't remember what letter it was that is added. lol)
Jochem
Jochemβ€’2mo ago
D for Dynamic πŸ™‚ the others are Short or Long, which are with the nav bar deployed or without
salentipy
salentipyβ€’2mo ago
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?
Jochem
Jochemβ€’2mo ago
The issue with vh is that it changes when the browser nav bar on mobile is visible
Vandana
Vandanaβ€’2mo ago
MarkBoots
MarkBootsβ€’2mo ago
well in that case, it is centered.
Vandana
Vandanaβ€’2mo ago
i havent changed anything
MarkBoots
MarkBootsβ€’2mo ago
is the bottom side of your browser window behind the taskbar?
Vandana
Vandanaβ€’2mo ago
exactly 101% you are right any solution? or does this matter
MarkBoots
MarkBootsβ€’2mo ago
yea, your window is of the screen. move it up. nothing wrong with the code
Vandana
Vandanaβ€’2mo ago
can we add a static margin-top and bottom ?for low resolution <body> doesnt have spacing at the top and bottom
No description
ἔρως
ἔρως‒5w ago
i read this more than once, and i don't get what the problem is
Vandana
Vandanaβ€’5w ago
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
ἔρως
ἔρως‒5w ago
you're not setting any margins for mobile
Want results from more Discord servers?
Add your server
More Posts